/* Zyno — rediseño negro + azul eléctrico: tipografía, micro-interacciones y animaciones */

:root{
  --zyno-blue:#2f5cff;
  --zyno-blue-2:#5fd4ff;
  --zyno-blue-link:#5b8aff;
  --zyno-line:#26262f;
  --zyno-text-dim:#a6a6b3;
  --zyno-red:#ff0033;
  /* Azul electrico para fondo solido de tarjeta (distinto de --zyno-blue,
     que ya es el azul de marca usado en botones/bordes/glow por todo el
     sitio — reutilizar ese mismo nombre aqui pisaria esos usos). */
  --zyno-blue-solid:#0052ff;
}

/* Auditoria de contraste: el azul de marca (#2f5cff) da 3.86:1 sobre el fondo
   casi negro, por debajo del minimo AA (4.5:1) para texto normal. Se usa una
   variante mas clara como color de enlace por defecto en todo el sitio — los
   enlaces con color propio (botones, menu con !important, notas ya en linea)
   no se ven afectados porque un estilo mas especifico o en linea siempre gana. */
a{
  color: var(--zyno-blue-link);
}
a:hover{
  color: var(--zyno-blue-2);
}

/* Meta de entrada (fecha, autor): usa el azul de marca directamente, mismo problema. */
.entry-meta,
.entry-meta *{
  color: var(--zyno-blue-link) !important;
}

/* Breadcrumbs: gris #777 da 4.42:1, por debajo del minimo AA. */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a{
  color: var(--zyno-text-dim) !important;
}

/* Badge "Siempre activo" de Complianz: verde #008000 da 3.85:1. */
.cmplz-always-active{
  color: #4ade80 !important;
}

body, .main-header-menu, h1, h2, h3, h4, h5, h6, .site-title{
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, .site-title, .wp-block-button__link{
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-reduced-motion: no-preference){
  a, .wp-block-button__link, .zyno-cat-card, .zyno-why-card{
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s, background-color .25s, opacity .25s;
  }
}

/* Menú: subrayado animado */
.main-header-menu .menu-link{ position:relative; }
.main-header-menu .menu-item > .menu-link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--zyno-blue),var(--zyno-blue-2));
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.main-header-menu .menu-item:hover > .menu-link::after,
.main-header-menu .current-menu-item > .menu-link::after{ transform:scaleX(1); }

/* Botones: elevación + brillo azul */
.wp-block-button__link{ will-change:transform; }
.wp-block-button.zyno-btn-glow .wp-block-button__link,
.wp-block-button__link{
  box-shadow:0 0 0 rgba(47,92,255,0);
}
a.wp-block-button__link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px -8px rgba(47,92,255,.6), 0 0 22px -4px rgba(95,212,255,.35);
}
a.wp-block-button__link:active{ transform:translateY(0) scale(.98); }

/* Tarjetas de categoría */
.zyno-cat-card .wp-block-button__link{ position:relative; overflow:hidden; }
.zyno-cat-card:hover .wp-block-button__link{
  transform:translateY(-6px);
  border-color:var(--zyno-blue) !important;
  background-color:#1f1f28 !important;
  box-shadow:0 16px 30px -16px rgba(47,92,255,.55);
}

/* Tarjetas "Por qué Zyno" */
.zyno-why-card:hover{
  transform:translateY(-5px);
  border-color:var(--zyno-blue-2) !important;
}

/* Halo detrás del hero */
.zyno-hero{ position:relative; overflow:hidden; isolation:isolate; }
.zyno-hero::before{
  content:''; position:absolute; z-index:-1; left:50%; top:38%;
  width:820px; height:820px; max-width:220vw;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(47,92,255,.5), rgba(47,92,255,.1) 45%, transparent 70%);
  filter:blur(10px);
  animation:zyno-pulse 6s ease-in-out infinite;
}
@keyframes zyno-pulse{
  0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}

/* Entrada escalonada del hero */
@media (prefers-reduced-motion: no-preference){
  .zyno-anim-1, .zyno-anim-2, .zyno-anim-3, .zyno-anim-4{
    opacity:0; transform:translateY(22px);
    animation:zyno-rise .8s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .zyno-anim-1{ animation-delay:.05s; }
  .zyno-anim-2{ animation-delay:.18s; }
  .zyno-anim-3{ animation-delay:.32s; }
  .zyno-anim-4{ animation-delay:.46s; }
}
@keyframes zyno-rise{ to{ opacity:1; transform:translateY(0); } }

/* Scroll reveal */
@media (prefers-reduced-motion: no-preference){
  .zyno-reveal{
    opacity:0; transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .zyno-reveal.zyno-visible{ opacity:1; transform:translateY(0); }
}

/* Halo radial en la banda de CTA final */
.zyno-cta-band{ position:relative; overflow:hidden; }
.zyno-cta-band::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(47,92,255,.18), transparent 65%);
  pointer-events:none;
}
.zyno-cta-band > *{ position:relative; z-index:1; }

/* Transiciones de pagina (progressive enhancement, sin JS) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
}

/* Filtro por marca — pagina Tienda */
.zyno-brand-filter{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:420px;
  margin:0 0 40px;
}
.zyno-brand-filter__btn{
  font-family:'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
  text-align:left;
  padding:16px 22px;
  border-radius:10px;
  border:1px solid var(--zyno-line);
  background:#131318;
  color:#f4f2ec;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s, background-color .25s, color .25s;
}
.zyno-brand-filter__btn::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(160px 60px at 0% 50%, rgba(47,92,255,.22), transparent 70%);
  opacity:0;
  transition:opacity .3s;
}
.zyno-brand-filter__btn:hover{
  transform:translateX(4px);
  border-color:var(--zyno-blue);
  background:#1b1b22;
  box-shadow:0 10px 26px -14px rgba(47,92,255,.55);
}
.zyno-brand-filter__btn:hover::before{ opacity:1; }
.zyno-brand-filter__btn.is-active{
  border-color:var(--zyno-blue-2);
  background:linear-gradient(90deg, rgba(47,92,255,.85), rgba(47,92,255,.55));
  color:#ffffff;
  box-shadow:0 0 0 1px var(--zyno-blue-2) inset, 0 10px 24px -14px rgba(47,92,255,.6);
}
.zyno-brand-filter__btn.is-active::after{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--zyno-blue-2), var(--zyno-blue));
}

/* Accesorios: boton desplegable + panel de subcategorias */
.zyno-accesorios-filter{
  display:flex;
  flex-direction:column;
}
.zyno-accesorios-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.zyno-accesorios-caret{
  display:inline-block;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
  color:var(--zyno-blue-2);
  font-size:12px;
}
.zyno-accesorios-toggle[aria-expanded="true"] .zyno-accesorios-caret{
  transform:rotate(180deg);
}
.zyno-accesorios-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  padding:12px 10px;
  border-radius:10px;
  border:1px solid var(--zyno-line);
  background:#0f0f13;
  animation:zyno-accordion-open .25s cubic-bezier(.2,.7,.3,1);
}
.zyno-accesorios-panel[hidden]{
  display:none !important;
}
@keyframes zyno-accordion-open{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.zyno-accesorios-item{
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:13.5px;
  font-weight:600;
  text-align:left;
  color:#c7c7d1;
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  padding:10px 14px;
  cursor:pointer;
  position:relative;
  transition:color .2s, background-color .2s, border-color .2s, transform .2s cubic-bezier(.2,.7,.3,1);
}
.zyno-accesorios-item:hover{
  color:#f4f2ec;
  background:#1b1b22;
  border-color:var(--zyno-line);
  transform:translateX(3px);
}
.zyno-accesorios-item.is-active{
  color:#ffffff;
  background:linear-gradient(90deg, rgba(47,92,255,.85), rgba(47,92,255,.55));
  border-color:var(--zyno-blue-2);
  box-shadow:0 0 0 1px var(--zyno-blue-2) inset;
}

/* "Ordenar por": el texto hereda el color claro de la web (buen contraste
   sobre el fondo oscuro de la pagina mientras el select esta cerrado), pero
   las <option> del desplegable las pinta el sistema operativo/navegador con
   SU PROPIO fondo (blanco en Chrome/Windows) sin heredar el fondo oscuro de
   la pagina — el texto claro heredado queda sobre blanco, ilegible. Se fija
   fondo y color explicitos, cerrado y en cada <option>, con la paleta oscura
   de la web en vez del fondo claro por defecto del navegador. */
.woocommerce-ordering select.orderby,
.woocommerce-ordering select{
  color:#f4f2ec !important;
  background-color:#131318 !important;
  border:1px solid var(--zyno-line) !important;
  -webkit-text-fill-color:#f4f2ec !important;
}
.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select:hover,
.woocommerce-ordering select.orderby:focus,
.woocommerce-ordering select:focus{
  border-color:var(--zyno-blue) !important;
  outline:none;
}
.woocommerce-ordering select.orderby option,
.woocommerce-ordering select option{
  color:#f4f2ec !important;
  background-color:#131318 !important;
}

/* Titulo "Direccion de facturacion/envio": aparece en Mi cuenta > detalle de
   pedido (clase .woocommerce-column__title) Y en Mi cuenta > Direcciones
   (clase distinta, .woocommerce-Address-title.title -- WooCommerce usa un
   componente diferente en cada pantalla para lo mismo). En ambos casos
   WooCommerce le pone su fondo claro por defecto, pero el texto hereda el
   color claro global del tema oscuro -- queda casi blanco sobre casi
   blanco, ilegible. Quitamos ese fondo para que se lea sobre el fondo
   oscuro de la pagina, igual que el resto del bloque de direccion. */
.woocommerce-column__title,
.woocommerce-Address-title.title{
  background:transparent !important;
}

/* Mensaje "Proximamente" cuando una subcategoria de accesorios no tiene productos aun */
/* El tema fija display en estos elementos, lo que anula [hidden] por defecto */
ul.products[hidden],
.woocommerce-ordering[hidden],
.woocommerce-result-count[hidden]{
  display:none !important;
}

.zyno-coming-soon{
  max-width:520px;
  margin:20px auto 0;
  text-align:center;
  padding:40px 28px;
  border-radius:16px;
  border:1.5px solid rgba(47,92,255,.4);
  background: radial-gradient(120% 130% at 50% 0%, #131318 0%, #131318 55%, #1b1b22 100%);
  box-shadow: 0 0 0 1px rgba(47,92,255,.08), 0 0 30px -10px rgba(47,92,255,.5);
}
.zyno-coming-soon__title{
  display:block;
  font-family:'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:22px;
  color:#ffffff;
  margin-bottom:10px;
  background:linear-gradient(90deg,#5fd4ff,#2f5cff 70%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.zyno-coming-soon__text{
  color:#c7c7d1;
  font-size:14.5px;
  line-height:1.6;
  margin:0;
}

/* ---------- Tarjetas de producto WooCommerce ---------- */
/* La foto de producto trae fondo blanco de fábrica (no se toca la imagen).
   En vez de que ese blanco choque directo contra el negro de la página, la
   propia tarjeta pasa a ser gris muy claro con degradado radial hacia las
   esquinas y un marco azul con glow, para que el salto de contraste se lea
   como una tarjeta iluminada a propósito, no como un error de estilos. */
ul.products li.product{
  background: radial-gradient(120% 130% at 50% 0%, #f0f0f2 0%, #f0f0f2 52%, #d7d7dc 100%);
  border-radius: 16px;
  border: 1.5px solid rgba(47,92,255,.4);
  box-shadow: 0 0 0 1px rgba(47,92,255,.06), 0 0 26px -8px rgba(47,92,255,.5);
  padding: 16px 16px 20px;
  margin-bottom: 0;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
ul.products li.product .astra-shop-thumbnail-wrap{
  border-radius: 10px;
  overflow: hidden;
}
ul.products li.product .astra-shop-summary-wrap{
  padding-left: 2px;
  padding-right: 2px;
}
/* Texto oscuro porque ahora se apoya en un fondo claro, no en el negro de la pagina */
ul.products li.product .ast-woo-product-category{
  color: #1c46e0 !important;
  font-weight: 600;
}
ul.products li.product .ast-loop-product__link,
ul.products li.product .woocommerce-loop-product__title{
  color: #0a0a0d;
}
ul.products li.product .price,
ul.products li.product .price *{
  color: #3a3a42 !important;
}
ul.products li.product:hover{
  transform: translateY(-8px);
  border-color: rgba(47,92,255,.85);
  box-shadow: 0 0 0 1px rgba(47,92,255,.16), 0 20px 44px -14px rgba(47,92,255,.6), 0 0 46px -10px rgba(95,212,255,.45);
}
@media (prefers-reduced-motion: reduce){
  ul.products li.product{ transition: none; }
  ul.products li.product:hover{ transform: none; }
}

/* Astra superpone un boton-icono de "anadir al carrito" sobre la propia foto
   al pasar el raton (estilo "modern" de tienda) — se oculta porque la tarjeta
   ya tiene su boton de texto completo debajo del precio. */
ul.products li.product .ast-on-card-button{
  display: none !important;
}

/* El boton de anadir al carrito pasa a ser su propio bloque, separado del
   titulo/precio por una linea sutil, con el mismo lenguaje de marco+glow azul
   que el resto de la tarjeta. */
ul.products li.product .astra-shop-summary-wrap{
  display: flex;
  flex-direction: column;
}
ul.products li.product a.add_to_cart_button{
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid rgba(47,92,255,.2);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(47,92,255,.12), 0 8px 20px -10px rgba(47,92,255,.55);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-color .25s;
}
ul.products li.product a.add_to_cart_button:hover{
  transform: translateY(-2px);
  background-color: #1c46e0;
  box-shadow: 0 0 0 1px rgba(47,92,255,.25), 0 14px 28px -10px rgba(47,92,255,.7), 0 0 26px -6px rgba(95,212,255,.5);
}

/* ---------- Tarjetas "Encuentra tu gama" (Inicio) ---------- */
/* Mismo lenguaje visual que las tarjetas de producto de la Tienda: fondo gris
   claro con degradado radial, marco azul con glow, elevacion al hover. */
.zyno-range-card{
  background: radial-gradient(120% 130% at 50% 0%, #f0f0f2 0%, #f0f0f2 52%, #d7d7dc 100%) !important;
  border-radius: 18px;
  border: 1.5px solid rgba(47,92,255,.4);
  box-shadow: 0 0 0 1px rgba(47,92,255,.06), 0 0 30px -8px rgba(47,92,255,.5);
  padding: 22px 22px 26px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
  position: relative;
}
.zyno-range-card:hover{
  transform: translateY(-8px);
  border-color: rgba(47,92,255,.85);
  box-shadow: 0 0 0 1px rgba(47,92,255,.16), 0 22px 46px -14px rgba(47,92,255,.6), 0 0 48px -10px rgba(95,212,255,.45);
}
.zyno-range-badge{
  display: inline-block;
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #2f5cff, #1c46e0);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px -6px rgba(47,92,255,.6);
}
.zyno-range-img{
  margin: 0 0 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zyno-range-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.zyno-range-name{
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #0a0a0d;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.zyno-range-price{
  color: #3a3a42;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 18px;
}
.zyno-range-btn{
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: #ffffff !important;
  background-color: #2f5cff;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(47,92,255,.12), 0 8px 20px -10px rgba(47,92,255,.55);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-color .25s;
}
.zyno-range-btn:hover{
  transform: translateY(-2px);
  background-color: #1c46e0;
  box-shadow: 0 0 0 1px rgba(47,92,255,.25), 0 14px 28px -10px rgba(47,92,255,.7), 0 0 26px -6px rgba(95,212,255,.5);
}

/* ---------- Bloque "Matricula tu patinete" (Inicio) ---------- */
/* Tarjeta oscura con degradado + marco azul, todo el bloque es un unico
   enlace a la ficha del servicio de matriculacion; se eleva y el glow se
   intensifica al pasar el raton, mismo lenguaje que el resto de tarjetas. */
.zyno-matricula-card,
.zyno-matricula-card *{
  text-decoration: none !important;
}
.zyno-matricula-card{
  display: block;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: radial-gradient(120% 160% at 50% 0%, #16161d 0%, #16161d 55%, #1f1f28 100%);
  border-radius: 20px;
  border: 1.5px solid rgba(47,92,255,.4);
  box-shadow: 0 0 0 1px rgba(47,92,255,.08), 0 0 34px -10px rgba(47,92,255,.5);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.zyno-matricula-card::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(47,92,255,.2), transparent 65%);
  pointer-events:none;
}
.zyno-matricula-card > *{
  position: relative;
  z-index: 1;
}
.zyno-matricula-card:hover{
  transform: translateY(-8px);
  border-color: rgba(47,92,255,.85);
  box-shadow: 0 0 0 1px rgba(47,92,255,.16), 0 22px 46px -14px rgba(47,92,255,.6), 0 0 50px -10px rgba(95,212,255,.45);
}
.zyno-matricula-badge{
  display: inline-block;
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #2f5cff, #1c46e0);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px -6px rgba(47,92,255,.6);
}
.zyno-matricula-title{
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 14px;
}
.zyno-matricula-text{
  color: #c7c7d1;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto 14px;
  max-width: 560px;
}
.zyno-matricula-note{
  color: var(--zyno-text-dim);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 auto 26px;
  max-width: 520px;
}
.zyno-matricula-btn{
  display: inline-block;
  color: #ffffff;
  background-color: #2f5cff;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(47,92,255,.12), 0 8px 20px -10px rgba(47,92,255,.55);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-color .25s;
}
.zyno-matricula-card:hover .zyno-matricula-btn{
  transform: translateY(-2px);
  background-color: #1c46e0;
  box-shadow: 0 0 0 1px rgba(47,92,255,.25), 0 14px 28px -10px rgba(47,92,255,.7), 0 0 26px -6px rgba(95,212,255,.5);
}
@media (max-width: 600px){
  .zyno-matricula-card{ padding: 34px 22px; }
  .zyno-matricula-title{ font-size: 24px; }
}

/* ---------- Campos YITH WooCommerce Product Add-Ons (ficha de producto) ---------- */
/* El plugin fija un fondo blanco por defecto en linea (style="background-color:#ffffff")
   sobre cada campo, pero el texto del sitio es claro para el fondo oscuro general:
   blanco sobre blanco. Se fuerza un fondo oscuro con !important (unica forma de
   ganarle a un estilo en linea) y se ordena visualmente cada campo como tarjeta,
   mismo lenguaje que el resto del rediseño. */
.yith-wapo-addon{
  background-color: #131318 !important;
  border: 1px solid var(--zyno-line);
  border-radius: 10px;
  padding: 16px 18px !important;
  margin-bottom: 12px;
}
.yith-wapo-addon .wapo-addon-title{
  color: #f4f2ec;
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.yith-wapo-addon .yith-wapo-option-value{
  border: 1px solid var(--zyno-line);
  border-radius: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.yith-wapo-addon .yith-wapo-option-value:focus{
  outline: none;
  border-color: var(--zyno-blue);
  box-shadow: 0 0 0 2px rgba(47,92,255,.25);
}
.yith-wapo-addon .description{
  color: var(--zyno-text-dim);
  font-size: 13px;
  margin-top: 6px;
}
.yith-wapo-addon input::placeholder{
  color: #6b6b76;
}
.yith-wapo-addon label{
  color: #f4f2ec;
}
.yith-wapo-totals{
  color: #f4f2ec !important;
}
/* Miniatura junto al checkbox (p.ej. portamatriculas): el plugin no limita
   el tamano de la imagen por defecto, asi que se fuerza a un tamano de
   miniatura acorde al resto del formulario. */
.yith-wapo-option .option-container{
  display: flex;
  align-items: center;
  gap: 12px;
}
.yith-wapo-option .image-container{
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--zyno-line);
  background: #ffffff;
}
.yith-wapo-option .image-container .image{
  width: 100%;
  height: 100%;
}
.yith-wapo-option .image-container img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Icono flotante del carrito (todas las paginas) ---------- */
.zyno-float-cart{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(120% 130% at 50% 0%, #1b1b22 0%, #131318 100%);
  border: 1.5px solid rgba(47,92,255,.4);
  box-shadow: 0 0 0 1px rgba(47,92,255,.08), 0 8px 24px -8px rgba(0,0,0,.6), 0 0 26px -8px rgba(47,92,255,.5);
  color: #f4f2ec !important;
  text-decoration: none !important;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
@media (prefers-reduced-motion: no-preference){
  .zyno-float-cart{
    animation: zyno-float-cart-in .5s .2s cubic-bezier(.2,.7,.2,1) both;
  }
}
@keyframes zyno-float-cart-in{
  from{ opacity: 0; transform: translateY(16px) scale(.85); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.zyno-float-cart:hover{
  transform: translateY(-4px) scale(1.06);
  border-color: rgba(47,92,255,.85);
  box-shadow: 0 0 0 1px rgba(47,92,255,.16), 0 14px 30px -10px rgba(0,0,0,.6), 0 0 34px -6px rgba(95,212,255,.55);
}
.zyno-float-cart-icon{
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.zyno-float-cart-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  display: inline-block;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f5cff, #1c46e0);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #0a0a0d, 0 4px 10px -2px rgba(47,92,255,.6);
}
.zyno-float-cart-badge[hidden]{
  display: none !important;
}
@media (prefers-reduced-motion: no-preference){
  .zyno-float-cart-badge{
    animation: zyno-badge-pop .3s cubic-bezier(.2,.7,.2,1);
  }
}
@keyframes zyno-badge-pop{
  from{ transform: scale(.4); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
@media (max-width: 480px){
  .zyno-float-cart{ right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .zyno-float-cart-icon{ width: 22px; height: 22px; }
}

/* ---------- Boton flotante de contacto comercial por WhatsApp ---------- */
/* A proposito NO es una burbuja de chat en vivo: pastilla oscura con texto,
   coherente con el resto de la web, con el texto siempre visible (no solo
   al hover). Frase corta de una sola linea — sin ancho fijo ni wrap, el
   pill se ajusta de forma natural al contenido (evita hueco vacio o
   descuadre si el texto cambia de longitud mas adelante). */
.zyno-whatsapp-btn{
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 32px);
  background: radial-gradient(120% 130% at 50% 0%, #1b1b22 0%, #131318 100%);
  border: 1.5px solid rgba(37,211,102,.35);
  border-radius: 999px;
  padding: 10px 16px 10px 12px;
  box-shadow: 0 0 0 1px rgba(37,211,102,.08), 0 8px 24px -8px rgba(0,0,0,.6);
  text-decoration: none !important;
  color: #f4f2ec !important;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.zyno-whatsapp-btn:hover{
  transform: translateY(-3px);
  border-color: rgba(37,211,102,.65);
  box-shadow: 0 0 0 1px rgba(37,211,102,.16), 0 12px 28px -10px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: no-preference){
  .zyno-whatsapp-btn{
    animation: zyno-float-cart-in .5s .3s cubic-bezier(.2,.7,.2,1) both;
  }
}
.zyno-whatsapp-icon{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #25D366;
}
.zyno-whatsapp-text{
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #f4f2ec;
  white-space: nowrap;
}
@media (max-width: 480px){
  .zyno-whatsapp-btn{
    right: 16px;
    bottom: 74px;
    gap: 7px;
    padding: 8px 14px 8px 10px;
  }
  .zyno-whatsapp-icon{ width: 18px; height: 18px; }
  .zyno-whatsapp-text{ font-size: 11.5px; }
}
@media (max-width: 360px){
  .zyno-whatsapp-text{ font-size: 11px; }
}

/* ---------- Icono de cuenta en el menu principal ---------- */
/* Desktop: icono solo (circulo). Movil (menu desplegable de la barra): icono
   + texto en linea, igual que el resto de items de la lista. El texto del
   item sigue en el DOM en ambos casos (nombre accesible para lectores de
   pantalla), font-size:0 en escritorio solo lo oculta visualmente. */
.zyno-menu-account .menu-link{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.zyno-menu-account .menu-link::before{
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 922px){
  .zyno-menu-account .menu-link{
    font-size: 0;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: 50%;
    transition: background-color .2s, transform .2s;
  }
  .zyno-menu-account .menu-link::before{
    margin-right: 0;
    width: 20px;
    height: 20px;
  }
  .zyno-menu-account .menu-link::after{
    display: none !important;
  }
  .zyno-menu-account .menu-link:hover{
    background-color: rgba(47,92,255,.15);
    transform: translateY(-2px);
  }
}

/* ---------- Aviso "te faltan X€ para envio gratis" (Carrito/Checkout) ---------- */
.zyno-shipping-notice{
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(47,92,255,.35);
  background: rgba(47,92,255,.1);
  color: #f4f2ec;
  font-size: 14px;
  line-height: 1.5;
}
.zyno-shipping-notice[hidden]{
  display: none !important;
}
.zyno-shipping-notice .woocommerce-Price-amount{
  color: #5fd4ff;
  font-weight: 700;
}

/* ---------- Reseñas de clientes (Inicio) ---------- */
.zyno-reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 921px){
  .zyno-reviews-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .zyno-reviews-grid{ grid-template-columns: 1fr; }
}
.zyno-review-card{
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 160% at 50% 0%, #16161d 0%, #16161d 55%, #1f1f28 100%);
  border-radius: 18px;
  border: 1.5px solid rgba(47,92,255,.4);
  box-shadow: 0 0 0 1px rgba(47,92,255,.08), 0 0 30px -10px rgba(47,92,255,.5);
  padding: 28px 26px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.zyno-review-card:hover{
  transform: translateY(-6px);
  border-color: rgba(47,92,255,.85);
  box-shadow: 0 0 0 1px rgba(47,92,255,.16), 0 20px 40px -14px rgba(47,92,255,.6), 0 0 44px -10px rgba(95,212,255,.45);
}
.zyno-review-stars{
  color: #5fd4ff;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.zyno-review-text{
  color: #e4e4ea;
  font-size: 15px;
  line-height: 1.6;
  flex-grow: 1;
  margin: 0 0 20px;
}
.zyno-review-footer{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--zyno-line);
}
.zyno-review-author{
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
}
.zyno-review-product{
  color: var(--zyno-blue-link) !important;
  font-size: 13px;
  text-decoration: none !important;
}
.zyno-review-product:hover{
  color: var(--zyno-blue-2) !important;
}

.zyno-reviews-empty{
  max-width: 560px;
  margin: 48px auto 0;
  text-align: center;
  padding: 44px 32px;
  border-radius: 18px;
  border: 1.5px solid rgba(47,92,255,.4);
  background: radial-gradient(120% 160% at 50% 0%, #16161d 0%, #16161d 55%, #1f1f28 100%);
  box-shadow: 0 0 0 1px rgba(47,92,255,.08), 0 0 30px -10px rgba(47,92,255,.5);
}
.zyno-reviews-empty__title{
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
  background: linear-gradient(90deg,#5fd4ff,#2f5cff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zyno-reviews-empty__text{
  color: #c7c7d1;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Etiqueta "Próximamente" (sustituye precio+boton de compra) ---------- */
.zyno-proximamente-badge{
  display: inline-block;
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #2f5cff, #1c46e0);
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(47,92,255,.6);
}

/* "PVP recomendado: X€" -- debajo del precio final, sin tachado (es
   informativo, no una oferta real) y en letra mas pequena que el precio
   para que quede claro que no es el importe a pagar. */
del.zyno-pvp-recomendado{
  display: block !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--zyno-text-dim);
  text-decoration: none !important;
  margin-left: 0;
  margin-top: 2px;
}
del.zyno-pvp-recomendado .woocommerce-Price-amount{
  font-size: inherit;
}

/* Tarjetas de producto en la Tienda: boton siempre pegado abajo, alineado
   igual en toda la fila, da igual cuanto ocupe el titulo o el precio+PVP
   de arriba. Astra ya pone ul.products en grid (estira las tarjetas a la
   misma altura de fila) y li.product en flex column — lo que faltaba es
   que el contenedor interno de contenido (astra-shop-summary-wrap) crezca
   para ocupar esa altura, y que el boton se empuje al final dentro de el. */
ul.products{
  align-items: stretch;
}
ul.products > li.product{
  display: flex;
  flex-direction: column;
  height: 100%;
}
ul.products > li.product .astra-shop-summary-wrap{
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* .add_to_cart_button (simple y variable) ya tiene margin-top:auto !important
   en la regla de mas arriba (linea ~385) — aqui solo falta cubrir el enlace
   "Leer mas" de los productos sin precio comprable, que no lleva esa clase. */
ul.products > li.product .button.product_type_simple:not(.add_to_cart_button){
  margin-top: auto;
}

/* ---------- Diferenciar accesorios y la ficha de matricula ---------- */
/* Mismo layout/tipografia/alineacion de boton que el resto (no se toca nada
   de eso aqui) — accesorios con fondo SOLIDO azul electrico + texto blanco,
   mismo enfoque que la tarjeta de Matricula (fondo rojo solido) pero en
   azul, para diferenciar accesorios tanto de los patinetes (estilo normal,
   sin fondo de color) como de Matricula (rojo). Sustituye el tono gris mas
   oscuro que tenian antes. Selectores por las 15 subcategorias en vez de la
   categoria padre "Accesorios" porque cada producto lleva la clase de su
   subcategoria concreta, no la del padre. */
ul.products li.product.product_cat-alarmas,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas,
ul.products li.product.product_cat-bolsos-y-almacenaje,
ul.products li.product.product_cat-candados,
ul.products li.product.product_cat-cascos,
ul.products li.product.product_cat-chalecos-y-reflectantes,
ul.products li.product.product_cat-ganchos,
ul.products li.product.product_cat-iluminacion,
ul.products li.product.product_cat-intermitentes,
ul.products li.product.product_cat-localizadores-y-gps,
ul.products li.product.product_cat-manillares-secundarios,
ul.products li.product.product_cat-protectores,
ul.products li.product.product_cat-retrovisores,
ul.products li.product.product_cat-soportes-de-movil,
ul.products li.product.product_cat-vinilos-y-pegatinas{
  background: var(--zyno-blue-solid);
  border-color: var(--zyno-blue-solid);
}
ul.products li.product.product_cat-alarmas:hover,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas:hover,
ul.products li.product.product_cat-bolsos-y-almacenaje:hover,
ul.products li.product.product_cat-candados:hover,
ul.products li.product.product_cat-cascos:hover,
ul.products li.product.product_cat-chalecos-y-reflectantes:hover,
ul.products li.product.product_cat-ganchos:hover,
ul.products li.product.product_cat-iluminacion:hover,
ul.products li.product.product_cat-intermitentes:hover,
ul.products li.product.product_cat-localizadores-y-gps:hover,
ul.products li.product.product_cat-manillares-secundarios:hover,
ul.products li.product.product_cat-protectores:hover,
ul.products li.product.product_cat-retrovisores:hover,
ul.products li.product.product_cat-soportes-de-movil:hover,
ul.products li.product.product_cat-vinilos-y-pegatinas:hover{
  border-color: var(--zyno-blue-solid);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 20px 44px -14px rgba(0,82,255,.7), 0 0 46px -10px rgba(0,82,255,.6);
}
/* Texto: categoria, titulo y precio en blanco, igual que en Matricula. */
ul.products li.product.product_cat-alarmas .ast-woo-product-category,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas .ast-woo-product-category,
ul.products li.product.product_cat-bolsos-y-almacenaje .ast-woo-product-category,
ul.products li.product.product_cat-candados .ast-woo-product-category,
ul.products li.product.product_cat-cascos .ast-woo-product-category,
ul.products li.product.product_cat-chalecos-y-reflectantes .ast-woo-product-category,
ul.products li.product.product_cat-ganchos .ast-woo-product-category,
ul.products li.product.product_cat-iluminacion .ast-woo-product-category,
ul.products li.product.product_cat-intermitentes .ast-woo-product-category,
ul.products li.product.product_cat-localizadores-y-gps .ast-woo-product-category,
ul.products li.product.product_cat-manillares-secundarios .ast-woo-product-category,
ul.products li.product.product_cat-protectores .ast-woo-product-category,
ul.products li.product.product_cat-retrovisores .ast-woo-product-category,
ul.products li.product.product_cat-soportes-de-movil .ast-woo-product-category,
ul.products li.product.product_cat-vinilos-y-pegatinas .ast-woo-product-category,
ul.products li.product.product_cat-alarmas .ast-loop-product__link,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas .ast-loop-product__link,
ul.products li.product.product_cat-bolsos-y-almacenaje .ast-loop-product__link,
ul.products li.product.product_cat-candados .ast-loop-product__link,
ul.products li.product.product_cat-cascos .ast-loop-product__link,
ul.products li.product.product_cat-chalecos-y-reflectantes .ast-loop-product__link,
ul.products li.product.product_cat-ganchos .ast-loop-product__link,
ul.products li.product.product_cat-iluminacion .ast-loop-product__link,
ul.products li.product.product_cat-intermitentes .ast-loop-product__link,
ul.products li.product.product_cat-localizadores-y-gps .ast-loop-product__link,
ul.products li.product.product_cat-manillares-secundarios .ast-loop-product__link,
ul.products li.product.product_cat-protectores .ast-loop-product__link,
ul.products li.product.product_cat-retrovisores .ast-loop-product__link,
ul.products li.product.product_cat-soportes-de-movil .ast-loop-product__link,
ul.products li.product.product_cat-vinilos-y-pegatinas .ast-loop-product__link,
ul.products li.product.product_cat-alarmas .woocommerce-loop-product__title,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas .woocommerce-loop-product__title,
ul.products li.product.product_cat-bolsos-y-almacenaje .woocommerce-loop-product__title,
ul.products li.product.product_cat-candados .woocommerce-loop-product__title,
ul.products li.product.product_cat-cascos .woocommerce-loop-product__title,
ul.products li.product.product_cat-chalecos-y-reflectantes .woocommerce-loop-product__title,
ul.products li.product.product_cat-ganchos .woocommerce-loop-product__title,
ul.products li.product.product_cat-iluminacion .woocommerce-loop-product__title,
ul.products li.product.product_cat-intermitentes .woocommerce-loop-product__title,
ul.products li.product.product_cat-localizadores-y-gps .woocommerce-loop-product__title,
ul.products li.product.product_cat-manillares-secundarios .woocommerce-loop-product__title,
ul.products li.product.product_cat-protectores .woocommerce-loop-product__title,
ul.products li.product.product_cat-retrovisores .woocommerce-loop-product__title,
ul.products li.product.product_cat-soportes-de-movil .woocommerce-loop-product__title,
ul.products li.product.product_cat-vinilos-y-pegatinas .woocommerce-loop-product__title{
  color: #ffffff !important;
}
ul.products li.product.product_cat-alarmas .price,
ul.products li.product.product_cat-alarmas .price *,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas .price,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas .price *,
ul.products li.product.product_cat-bolsos-y-almacenaje .price,
ul.products li.product.product_cat-bolsos-y-almacenaje .price *,
ul.products li.product.product_cat-candados .price,
ul.products li.product.product_cat-candados .price *,
ul.products li.product.product_cat-cascos .price,
ul.products li.product.product_cat-cascos .price *,
ul.products li.product.product_cat-chalecos-y-reflectantes .price,
ul.products li.product.product_cat-chalecos-y-reflectantes .price *,
ul.products li.product.product_cat-ganchos .price,
ul.products li.product.product_cat-ganchos .price *,
ul.products li.product.product_cat-iluminacion .price,
ul.products li.product.product_cat-iluminacion .price *,
ul.products li.product.product_cat-intermitentes .price,
ul.products li.product.product_cat-intermitentes .price *,
ul.products li.product.product_cat-localizadores-y-gps .price,
ul.products li.product.product_cat-localizadores-y-gps .price *,
ul.products li.product.product_cat-manillares-secundarios .price,
ul.products li.product.product_cat-manillares-secundarios .price *,
ul.products li.product.product_cat-protectores .price,
ul.products li.product.product_cat-protectores .price *,
ul.products li.product.product_cat-retrovisores .price,
ul.products li.product.product_cat-retrovisores .price *,
ul.products li.product.product_cat-soportes-de-movil .price,
ul.products li.product.product_cat-soportes-de-movil .price *,
ul.products li.product.product_cat-vinilos-y-pegatinas .price,
ul.products li.product.product_cat-vinilos-y-pegatinas .price *{
  color: #ffffff !important;
}
/* "PVP recomendado: X€" tachado: el gris tenue (--zyno-text-dim) pensado
   para fondo oscuro casi no se lee sobre este azul solido — blanco
   semitransparente en su lugar, sigue leyendose como "precio secundario". */
ul.products li.product.product_cat-alarmas del.zyno-pvp-recomendado,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas del.zyno-pvp-recomendado,
ul.products li.product.product_cat-bolsos-y-almacenaje del.zyno-pvp-recomendado,
ul.products li.product.product_cat-candados del.zyno-pvp-recomendado,
ul.products li.product.product_cat-cascos del.zyno-pvp-recomendado,
ul.products li.product.product_cat-chalecos-y-reflectantes del.zyno-pvp-recomendado,
ul.products li.product.product_cat-ganchos del.zyno-pvp-recomendado,
ul.products li.product.product_cat-iluminacion del.zyno-pvp-recomendado,
ul.products li.product.product_cat-intermitentes del.zyno-pvp-recomendado,
ul.products li.product.product_cat-localizadores-y-gps del.zyno-pvp-recomendado,
ul.products li.product.product_cat-manillares-secundarios del.zyno-pvp-recomendado,
ul.products li.product.product_cat-protectores del.zyno-pvp-recomendado,
ul.products li.product.product_cat-retrovisores del.zyno-pvp-recomendado,
ul.products li.product.product_cat-soportes-de-movil del.zyno-pvp-recomendado,
ul.products li.product.product_cat-vinilos-y-pegatinas del.zyno-pvp-recomendado{
  color: rgba(255,255,255,.8) !important;
}
/* Boton "Añadir al carrito" / "Leer mas": el azul de marca por defecto se
   confunde con el fondo azul solido de la tarjeta — se invierte a blanco
   con texto azul para que destaque con contraste alto, en vez de fundirse. */
ul.products li.product.product_cat-alarmas a.add_to_cart_button,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas a.add_to_cart_button,
ul.products li.product.product_cat-bolsos-y-almacenaje a.add_to_cart_button,
ul.products li.product.product_cat-candados a.add_to_cart_button,
ul.products li.product.product_cat-cascos a.add_to_cart_button,
ul.products li.product.product_cat-chalecos-y-reflectantes a.add_to_cart_button,
ul.products li.product.product_cat-ganchos a.add_to_cart_button,
ul.products li.product.product_cat-iluminacion a.add_to_cart_button,
ul.products li.product.product_cat-intermitentes a.add_to_cart_button,
ul.products li.product.product_cat-localizadores-y-gps a.add_to_cart_button,
ul.products li.product.product_cat-manillares-secundarios a.add_to_cart_button,
ul.products li.product.product_cat-protectores a.add_to_cart_button,
ul.products li.product.product_cat-retrovisores a.add_to_cart_button,
ul.products li.product.product_cat-soportes-de-movil a.add_to_cart_button,
ul.products li.product.product_cat-vinilos-y-pegatinas a.add_to_cart_button,
ul.products li.product.product_cat-alarmas .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-bases-antideslizantes-y-tablas .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-bolsos-y-almacenaje .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-candados .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-cascos .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-chalecos-y-reflectantes .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-ganchos .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-iluminacion .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-intermitentes .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-localizadores-y-gps .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-manillares-secundarios .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-protectores .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-retrovisores .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-soportes-de-movil .button.product_type_simple:not(.add_to_cart_button),
ul.products li.product.product_cat-vinilos-y-pegatinas .button.product_type_simple:not(.add_to_cart_button){
  background: #ffffff !important;
  color: var(--zyno-blue-solid) !important;
  border-top-color: #ffffff !important;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.4) !important;
}
ul.products li.product.product_cat-alarmas a.add_to_cart_button:hover,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas a.add_to_cart_button:hover,
ul.products li.product.product_cat-bolsos-y-almacenaje a.add_to_cart_button:hover,
ul.products li.product.product_cat-candados a.add_to_cart_button:hover,
ul.products li.product.product_cat-cascos a.add_to_cart_button:hover,
ul.products li.product.product_cat-chalecos-y-reflectantes a.add_to_cart_button:hover,
ul.products li.product.product_cat-ganchos a.add_to_cart_button:hover,
ul.products li.product.product_cat-iluminacion a.add_to_cart_button:hover,
ul.products li.product.product_cat-intermitentes a.add_to_cart_button:hover,
ul.products li.product.product_cat-localizadores-y-gps a.add_to_cart_button:hover,
ul.products li.product.product_cat-manillares-secundarios a.add_to_cart_button:hover,
ul.products li.product.product_cat-protectores a.add_to_cart_button:hover,
ul.products li.product.product_cat-retrovisores a.add_to_cart_button:hover,
ul.products li.product.product_cat-soportes-de-movil a.add_to_cart_button:hover,
ul.products li.product.product_cat-vinilos-y-pegatinas a.add_to_cart_button:hover{
  background: #eaf0ff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(0,0,0,.5) !important;
}
/* Badge "Proximamente": el gradiente azul por defecto se pierde sobre el
   mismo azul de fondo — blanco solido con texto azul, mismo criterio que
   el boton de arriba. */
ul.products li.product.product_cat-alarmas .zyno-proximamente-badge,
ul.products li.product.product_cat-bases-antideslizantes-y-tablas .zyno-proximamente-badge,
ul.products li.product.product_cat-bolsos-y-almacenaje .zyno-proximamente-badge,
ul.products li.product.product_cat-candados .zyno-proximamente-badge,
ul.products li.product.product_cat-cascos .zyno-proximamente-badge,
ul.products li.product.product_cat-chalecos-y-reflectantes .zyno-proximamente-badge,
ul.products li.product.product_cat-ganchos .zyno-proximamente-badge,
ul.products li.product.product_cat-iluminacion .zyno-proximamente-badge,
ul.products li.product.product_cat-intermitentes .zyno-proximamente-badge,
ul.products li.product.product_cat-localizadores-y-gps .zyno-proximamente-badge,
ul.products li.product.product_cat-manillares-secundarios .zyno-proximamente-badge,
ul.products li.product.product_cat-protectores .zyno-proximamente-badge,
ul.products li.product.product_cat-retrovisores .zyno-proximamente-badge,
ul.products li.product.product_cat-soportes-de-movil .zyno-proximamente-badge,
ul.products li.product.product_cat-vinilos-y-pegatinas .zyno-proximamente-badge{
  background: #ffffff !important;
  color: var(--zyno-blue-solid) !important;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
}

/* Tarjetas con FONDO de color solido para destacar un producto concreto
   (en vez de solo un acento de borde) — mismo layout/tipografia/alineacion
   de boton que el resto, solo cambia el fondo de la tarjeta y el color de
   texto para que siga siendo legible. Criterio reutilizable: para destacar
   asi otro producto en el futuro, solo hace falta anadir su selector
   ul.products li.product.post-<ID> a este mismo patron con el color que
   corresponda.
   Matricula (servicio, no patinete fisico — ID 113, sin SKU/categoria
   propia todavia): fondo rojo electrico. */
ul.products li.product.post-113{
  background: var(--zyno-red);
  border-color: var(--zyno-red);
}
ul.products li.product.post-113:hover{
  border-color: var(--zyno-red);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 20px 44px -14px rgba(255,0,51,.7), 0 0 46px -10px rgba(255,0,51,.6);
}
ul.products li.product.post-113 .ast-woo-product-category{
  color: #ffffff !important;
}
ul.products li.product.post-113 .ast-loop-product__link,
ul.products li.product.post-113 .woocommerce-loop-product__title{
  color: #ffffff !important;
}
ul.products li.product.post-113 .price,
ul.products li.product.post-113 .price *{
  color: #ffffff !important;
}

/* Boton "Añadir al carrito" cuando la variacion elegida (p.ej. un color)
   esta en "Proximamente": mismo lenguaje visual que el badge de precio, en
   vez de quedar como un boton simplemente gris/deshabilitado sin explicar
   por que no se puede comprar. Sigue deshabilitado de forma nativa por
   WooCommerce (clase .disabled), esto solo es el estilo. */
.single_add_to_cart_button.zyno-variation-coming-soon{
  background: linear-gradient(90deg, #2f5cff, #1c46e0) !important;
  border-color: #2f5cff !important;
  color: #ffffff !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* ---------- Mostrar/ocultar contraseña (login, registro, restablecer) ---------- */
.zyno-password-wrap{
  position: relative;
  display: block;
}
.zyno-password-wrap input[type="password"],
.zyno-password-wrap input[type="text"]{
  padding-right: 42px !important;
  box-sizing: border-box;
  width: 100%;
}
.zyno-password-toggle{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zyno-text-dim, #a6a6b3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s;
}
.zyno-password-toggle:hover,
.zyno-password-toggle:focus-visible{
  color: var(--zyno-blue, #2f5cff);
}
.zyno-password-toggle svg{
  width: 20px;
  height: 20px;
}
/* WooCommerce trae su PROPIO boton nativo de mostrar/ocultar contraseña
   (.show-password-input), pero en este sitio se renderiza sin icono visible
   (un triangulo oscuro, no un ojo) y queda superpuesto justo encima del
   nuestro -- dos botones "Mostrar contraseña" en el mismo sitio, confuso
   para lectores de pantalla y redundante. Ocultamos el nativo roto y
   dejamos solo el nuestro, que si funciona bien. */
.show-password-input{
  display: none !important;
}

/* ---------- Buscador expandible del header ---------- */
/* Mismo lenguaje visual que el icono de "Mi cuenta" de al lado: circulo de
   40px, sin fondo en reposo, circulo azul tenue al hover, icono via
   currentColor (hereda el color de texto del menu, sea cual sea el tema
   de Astra activo). El campo de texto se revela creciendo hacia la
   izquierda del icono (que no se mueve), con opacity+width animados. */
.zyno-search-toggle{
  display: flex;
  align-items: center;
  margin-left: 6px;
  color: inherit;
}
.zyno-search-form{
  display: flex;
  align-items: center;
}
.zyno-search-input-wrap{
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width .32s cubic-bezier(.2,.7,.2,1), opacity .22s ease;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
}
.zyno-search-toggle.is-open .zyno-search-input-wrap{
  width: 220px;
  opacity: 1;
  margin-right: 6px;
}
.zyno-search-input{
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f4f2ec;
  font-size: 14px;
  padding: 8px 4px 8px 16px !important;
  height: auto !important;
}
.zyno-search-input::placeholder{
  color: rgba(244,242,236,.55);
}
.zyno-search-input:focus{
  outline: none;
}
.zyno-search-close{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 4px;
  border: none;
  background: transparent;
  color: rgba(244,242,236,.6);
  cursor: pointer;
}
.zyno-search-close:hover{
  color: #f4f2ec;
}
.zyno-search-close svg{
  width: 15px;
  height: 15px;
}
.zyno-search-icon-btn{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.zyno-search-icon-btn:hover{
  background-color: rgba(47,92,255,.15);
  transform: translateY(-2px);
}
.zyno-search-icon-btn svg{
  width: 20px;
  height: 20px;
}
.zyno-search-toggle.is-open .zyno-search-icon-btn{
  background-color: rgba(47,92,255,.15);
}

/* Movil: la fila de cabecera es mucho mas estrecha (solo logo + hamburguesa
   + este buscador) — campo mas corto para no forzar el logo a encogerse ni
   desbordar la fila. */
.zyno-search-toggle--mobile.is-open .zyno-search-input-wrap{
  width: 130px;
}
@media (max-width: 360px){
  .zyno-search-toggle--mobile.is-open .zyno-search-input-wrap{
    width: 100px;
  }
}

/* Honeypot del formulario de contacto (Contact Form 7): invisible para
   usuarios reales, visible/rellenable solo para bots simples que no
   respetan el CSS. No usar display:none (algunos bots lo detectan y lo
   saltan) -- se saca de pantalla en su lugar. */
.zyno-cf7-honeypot,
p:has(> .zyno-cf7-honeypot) {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* En el Carrito, en movil, el CTA 'Finalizar compra' de WooCommerce (bloque
   nativo, sin sticky) puede caer justo en la franja inferior donde viven los
   iconos flotantes (WhatsApp + carrito), tapando el texto del boton. En esa
   pagina concreta el usuario ya esta listo para pagar, asi que ocultamos el
   aviso de WhatsApp para no estorbar el CTA principal. */
@media (max-width: 480px){
  body.woocommerce-cart .zyno-whatsapp-btn{
    display: none;
  }
}

/* Swatch de color 'Amarillo-Blanco' (Luz LED ojo de aguila): el plugin de
   variaciones fija el tipo de swatch (color/imagen) a nivel de atributo
   completo, no por termino, asi que no se puede pasar solo este termino a
   tipo imagen sin convertir TODOS los swatches de color del catalogo a
   imagen. Se sobreescribe visualmente solo este swatch con una foto real
   del producto via CSS, dirigido por la clase de termino que el plugin ya
   genera (color-variable-item-amarillo-blanco) -- no afecta a ningun otro
   color ni producto. */
.color-variable-item-amarillo-blanco .variable-item-span-color{
  background-image: url('https://zyno.es/wp-content/uploads/2026/09/luz-led-amarillo-blanco.webp');
  background-size: cover;
  background-position: center;
}

/* Swatch de color 'Blanco / Pistacho' (Ecoxtrem Deimos Single): bicolor,
   se muestra con un recorte real de la foto del patinete (junta plateada con
   detalle verde pistacho), igual que el swatch Amarillo-Blanco. */
.color-variable-item-blanco-pistacho .variable-item-span-color{
  background-image: url('https://zyno.es/wp-content/uploads/2026/10/swatch-blanco-pistacho.webp');
  background-size: cover;
  background-position: center;
}