/* ==========================================================================
   ATF3D.COM — Ajustes de WooCommerce
   Arregla las páginas que el tema deja sin estilar: ficha de producto,
   pestañas, productos relacionados, desplegables, carrito y "Mi cuenta".
   Va en el plugin a propósito: el tema es del usuario y no se toca.
   ========================================================================== */

:root{
  --aft-cian:#00f2ff;
  --aft-rosa:#ff00d4;
  --aft-borde:rgba(255,255,255,.08);
  --aft-panel:rgba(20,20,22,.85);
  --aft-fondo:#0a0a0c;
  --aft-texto:#e5e1e4;
  --aft-suave:#b9cacb;
  --aft-mono:"JetBrains Mono",ui-monospace,monospace;
  --aft-display:"Space Grotesk","Inter",sans-serif;
}

/* --------------------------------------------------------------------------
   1. CONTENEDOR: todo centrado y con márgenes. Antes se pegaba al borde.
   -------------------------------------------------------------------------- */
.woocommerce:not(.aft-portada),
.woocommerce-page main,
body.woocommerce main,
body.woocommerce-page main,
.woocommerce > .woocommerce-notices-wrapper,
body.single-product main,
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main{
  max-width:1280px;
  margin-left:auto;margin-right:auto;
  padding-left:1.5rem;padding-right:1.5rem;
  box-sizing:border-box;
}
@media(min-width:1024px){
  body.single-product main,body.woocommerce-cart main,
  body.woocommerce-checkout main,body.woocommerce-account main{
    padding-left:2rem;padding-right:2rem;
  }
}

/* --------------------------------------------------------------------------
   2. FICHA DE PRODUCTO: dos columnas equilibradas
   -------------------------------------------------------------------------- */
.woocommerce div.product{
  display:grid;grid-template-columns:1fr;gap:2rem;
  padding:2rem 0 0;
}
@media(min-width:960px){
  .woocommerce div.product{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem;align-items:start}
}

.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery{
  width:100% !important;float:none !important;margin:0 !important;
  border:1px solid var(--aft-borde);background:#000;padding:6px;position:relative;
}
.woocommerce div.product div.images img{width:100%;height:auto;display:block}
.woocommerce div.product div.summary{
  width:100% !important;float:none !important;margin:0 !important;
  background:var(--aft-panel);border:1px solid var(--aft-borde);
  padding:1.6rem;
}

.woocommerce div.product .product_title{
  font-family:var(--aft-display);font-weight:700;
  font-size:clamp(1.4rem,3vw,2rem);text-transform:uppercase;
  color:#fff;margin:0 0 1rem;line-height:1.15;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--aft-display);font-weight:700;font-size:1.8rem;
  color:var(--aft-cian);margin:0 0 1.2rem;
}
.woocommerce div.product p.price del{color:#6b7280;font-size:1rem;font-family:var(--aft-mono);margin-right:.5rem}
.woocommerce div.product p.price ins{background:none;color:var(--aft-cian);text-decoration:none}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--aft-suave);font-size:.94rem;line-height:1.65;margin-bottom:1.2rem;
}
.woocommerce div.product .product_meta{
  border-top:1px solid var(--aft-borde);margin-top:1.4rem;padding-top:1rem;
  font-family:var(--aft-mono);font-size:.74rem;color:#6b7280;
}
.woocommerce div.product .product_meta a{color:var(--aft-cian)}

/* Cantidad y botón de compra */
.woocommerce div.product form.cart{margin:1.2rem 0 0;display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch}
.woocommerce .quantity .qty{
  width:74px;text-align:center;padding:.75rem .4rem;
  background:#0a0d13 !important;border:1px solid var(--aft-borde) !important;
  color:#fff !important;border-radius:0 !important;font-family:var(--aft-mono);
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button{
  background:var(--aft-cian) !important;color:#05070c !important;
  font-family:var(--aft-mono);font-weight:700;font-size:.8rem;letter-spacing:.05em;
  border:none !important;border-radius:0 !important;padding:.85rem 1.6rem;
  text-transform:uppercase;transition:background .2s,box-shadow .2s;
}
.woocommerce div.product form.cart .button:hover{
  background:#00d7e2 !important;box-shadow:0 0 18px rgba(0,242,255,.5);
}

/* --------------------------------------------------------------------------
   3. DESPLEGABLES: se veían las opciones en blanco sobre blanco
   -------------------------------------------------------------------------- */
select,
.woocommerce select,
.woocommerce div.product form.cart .variations select,
.woocommerce-ordering select,
.woocommerce-page select{
  background-color:#0a0d13 !important;
  color:#e5e1e4 !important;
  border:1px solid var(--aft-borde) !important;
  border-radius:0 !important;
  padding:.7rem 2.2rem .7rem .8rem !important;
  font-family:var(--aft-texto,inherit);font-size:.9rem;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f2ff' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat:no-repeat !important;
  background-position:right .7rem center !important;
  background-size:15px !important;
  max-width:100%;
}
/* Las opciones del desplegable, legibles en cualquier navegador */
select option,
.woocommerce select option{
  background-color:#12151c !important;
  color:#e5e1e4 !important;
}
select option:checked,
select option:hover{background-color:#00f2ff !important;color:#05070c !important}
select:focus{border-color:var(--aft-cian) !important;outline:none}

/* Tabla de variaciones (Licencia: personal / comercial) */
.woocommerce div.product form.cart .variations{
  width:100%;border:none;margin-bottom:1rem;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{
  border:none;padding:.3rem 0;display:block;width:100%;text-align:left;
}
.woocommerce div.product form.cart .variations label{
  font-family:var(--aft-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--aft-cian);margin-bottom:.35rem;display:block;
}
.woocommerce div.product form.cart .reset_variations{
  font-family:var(--aft-mono);font-size:.7rem;color:#6b7280;
}
.woocommerce div.product .woocommerce-variation-price{margin:.8rem 0}

/* --------------------------------------------------------------------------
   4. PESTAÑAS Y DESCRIPCIÓN: estaban pegadas al borde y sin marco
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs{
  grid-column:1 / -1;margin-top:2.5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;gap:.4rem;padding:0;margin:0 0 -1px;border:none;flex-wrap:wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:1px solid var(--aft-borde);border-bottom:none;
  border-radius:0;margin:0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:.7rem 1.2rem;
  font-family:var(--aft-mono);font-size:.75rem;letter-spacing:.05em;
  color:var(--aft-suave);text-transform:uppercase;font-weight:400;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background:var(--aft-panel);border-color:var(--aft-cian);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--aft-cian)}

.woocommerce div.product .woocommerce-tabs .panel{
  background:var(--aft-panel);border:1px solid var(--aft-borde);
  padding:1.8rem;margin:0;color:var(--aft-suave);line-height:1.75;
}
.woocommerce div.product .woocommerce-tabs .panel h2{
  font-family:var(--aft-display);font-size:1.1rem;color:#fff;
  text-transform:uppercase;margin:0 0 1rem;
}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li{font-size:.94rem}
.woocommerce table.shop_attributes th{color:#fff;font-family:var(--aft-mono);font-size:.78rem}
.woocommerce table.shop_attributes td{color:var(--aft-suave)}

/* --------------------------------------------------------------------------
   5. PRODUCTOS RELACIONADOS: salían gigantes y descuadrados
   -------------------------------------------------------------------------- */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce .up-sells,
.woocommerce .cross-sells{
  grid-column:1 / -1;width:100%;margin-top:3rem;clear:both;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2{
  font-family:var(--aft-display);font-size:1.3rem;color:#fff;
  text-transform:uppercase;margin:0 0 1.5rem;
}
.woocommerce .related ul.products,
.woocommerce .upsells ul.products,
.woocommerce .cross-sells ul.products,
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr)) !important;
  gap:1.2rem !important;margin:0 !important;padding:0 !important;list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none !important}
.woocommerce ul.products li.product{
  width:auto !important;float:none !important;margin:0 !important;clear:none !important;
  background:var(--aft-panel);border:1px solid var(--aft-borde);
  padding:.85rem;display:flex;flex-direction:column;position:relative;
  transition:border-color .25s,transform .25s;
}
.woocommerce ul.products li.product:hover{border-color:rgba(0,242,255,.4);transform:translateY(-3px)}
.woocommerce ul.products li.product a img{
  width:100% !important;height:auto !important;margin:0 0 .8rem !important;display:block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--aft-display);font-size:.85rem;font-weight:700;
  color:#fff;text-transform:uppercase;padding:0;margin:.2rem 0 .4rem;line-height:1.3;
}
.woocommerce ul.products li.product .price{
  font-family:var(--aft-display);color:var(--aft-cian);font-weight:700;
  font-size:1rem;margin-top:auto;
}
.woocommerce ul.products li.product .price del{color:#6b7280;font-size:.78rem;font-weight:400}
.woocommerce ul.products li.product .price ins{background:none;color:var(--aft-cian);text-decoration:none}
.woocommerce ul.products li.product .button{
  margin-top:.7rem;text-align:center;justify-content:center;
  font-size:.72rem;padding:.6rem .9rem;
}
.woocommerce span.onsale{
  position:absolute;top:1.2rem;right:1.2rem;left:auto;
  background:var(--aft-rosa);color:#fff;
  font-family:var(--aft-mono);font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:.15rem .55rem;border-radius:0;margin:0;min-height:auto;min-width:auto;
  line-height:1.7;z-index:8;
}

/* --------------------------------------------------------------------------
   6. MI CUENTA: el menú se subía arriba, ahora va en columna a la izquierda
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce{
  display:grid;grid-template-columns:1fr;gap:1.5rem;padding-top:2rem;width:100%;
}
@media(min-width:900px){
  .woocommerce-account .woocommerce{
    grid-template-columns:260px minmax(0,1fr);gap:2rem;align-items:start;
  }
  /* Colocación explícita: si no, los avisos ocupan la primera celda y
     empujan el menú a la columna de la derecha. */
  .woocommerce-account .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1;grid-row:1}
  .woocommerce-account .woocommerce-MyAccount-navigation{grid-column:1;grid-row:2}
  .woocommerce-account .woocommerce-MyAccount-content{grid-column:2;grid-row:2}
}
/* Que no se quede estrecho dentro del contenedor del tema */
.woocommerce-account .af-content,
.woocommerce-account .af-container{max-width:1280px;width:100%;margin:0 auto}
.woocommerce-account .woocommerce-MyAccount-navigation{
  width:100% !important;float:none !important;
  background:var(--aft-panel);border:1px solid var(--aft-borde);padding:.6rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--aft-borde);margin:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:.8rem 1rem;
  font-family:var(--aft-mono);font-size:.78rem;color:var(--aft-suave);
  text-transform:uppercase;letter-spacing:.04em;transition:color .2s,background .2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  color:var(--aft-cian);background:rgba(0,242,255,.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--aft-cian);background:rgba(0,242,255,.1);
  border-left:2px solid var(--aft-cian);
}
.woocommerce-account .woocommerce-MyAccount-content{
  width:100% !important;float:none !important;
  background:var(--aft-panel);border:1px solid var(--aft-borde);
  padding:1.6rem;color:var(--aft-suave);
}
.woocommerce-account .woocommerce-MyAccount-content a{color:var(--aft-cian)}
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content{color:var(--aft-texto);font-size:.95rem;line-height:1.7}
.woocommerce-account .woocommerce-MyAccount-content mark{background:none;color:var(--aft-cian)}
.woocommerce-account h1,.woocommerce-account h2{color:#fff}

/* --------------------------------------------------------------------------
   7. CARRITO Y PAGO
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table{
  background:var(--aft-panel);border:1px solid var(--aft-borde);
  border-radius:0;border-collapse:collapse;width:100%;
}
.woocommerce table.shop_table th{
  color:#fff;font-family:var(--aft-mono);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.06em;padding:1rem;
  border-bottom:1px solid var(--aft-borde);
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--aft-borde);color:var(--aft-suave);padding:1rem;
}
.woocommerce table.shop_table td.product-name a{color:#fff}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%}
@media(min-width:900px){.woocommerce-cart .cart-collaterals .cart_totals{width:48%;float:right}}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{
  font-family:var(--aft-display);color:#fff;text-transform:uppercase;font-size:1.1rem;
}

.woocommerce #respond input#submit,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background:var(--aft-cian) !important;color:#05070c !important;
  font-family:var(--aft-mono);font-weight:700;font-size:.76rem;letter-spacing:.05em;
  border:none !important;border-radius:0 !important;padding:.75rem 1.3rem;
  text-transform:uppercase;transition:background .2s,box-shadow .2s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:#00d7e2 !important;box-shadow:0 0 16px rgba(0,242,255,.5);
}

/* Campos de formulario */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],textarea{
  background:#0a0d13 !important;border:1px solid var(--aft-borde) !important;
  color:var(--aft-texto) !important;border-radius:0 !important;padding:.7rem .8rem;
}
input:focus,textarea:focus{border-color:var(--aft-cian) !important;outline:none}
.woocommerce form .form-row label{color:var(--aft-suave);font-size:.85rem}

/* Avisos */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  background:var(--aft-panel) !important;border-top:3px solid var(--aft-cian) !important;
  color:var(--aft-texto) !important;font-family:var(--aft-mono);font-size:.82rem;
}
.woocommerce-error{border-top-color:#ff3e00 !important}
.woocommerce-message a.button,.woocommerce-info a.button{margin-left:1rem}

/* Migas de pan y resultados */
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--aft-mono);font-size:.74rem;color:#6b7280;padding:1.2rem 0 0;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--aft-suave)}
.woocommerce .woocommerce-result-count{
  font-family:var(--aft-mono);font-size:.78rem;color:var(--aft-suave);
}

/* Valoraciones */
.woocommerce #reviews #comments h2{color:#fff;font-family:var(--aft-display)}
.woocommerce #review_form input[type=submit]{background:var(--aft-cian) !important;color:#05070c !important}
.woocommerce .star-rating span{color:var(--aft-cian)}

/* Paginación */
.woocommerce nav.woocommerce-pagination ul{border:1px solid var(--aft-borde)}
.woocommerce nav.woocommerce-pagination ul li{border-right:1px solid var(--aft-borde)}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  color:var(--aft-suave);font-family:var(--aft-mono);font-size:.8rem;padding:.6rem .9rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:rgba(0,242,255,.12);color:var(--aft-cian);
}

/* --------------------------------------------------------------------------
   8. PIE PEGADO ABAJO
   Problema: en páginas con poco contenido (Mi cuenta, carrito vacío...) el pie
   subía a media pantalla y quedaba un hueco negro enorme debajo.
   Solución: el cuerpo en columna flexible y el pie con margen automático
   arriba, así siempre queda a ras del final de la ventana.
   -------------------------------------------------------------------------- */
html{min-height:100%}
body{
  min-height:100vh;
  display:flex !important;
  flex-direction:column !important;
}
/* Lo que va entre la cabecera y el pie ocupa el espacio sobrante */
body > main,
body > .af-content,
body > .site-content,
body > #content,
body > .aft-portada{
  flex:1 0 auto;
}
/* El pie siempre al final */
body > footer,
body > .af-footer{
  margin-top:auto !important;
  flex-shrink:0;
}
/* Los scripts y elementos sueltos no deben estirar la columna */
body > script,
body > .af-progress,
body > .af-top,
body > .nojq{flex:0 0 auto}

/* En Mi cuenta y carrito, un mínimo de altura para que no quede desangelado */
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce{min-height:38vh}


/* ==========================================================================
   LA TARJETA DEL CATALOGO

   Tres cosas que estaban mal y se ven en cuanto hay titulos largos:

   1. El boton de comprar era un cuadradito flotando en la esquina de abajo.
      Al ser absoluto se montaba encima del precio (se veia claramente en
      "Muralla de Ciudadela · Pack 4") y ademas el icono solo se entendia al
      pasar el raton. Ahora es un rectangulo ancho al final de la tarjeta,
      con su icono Y su texto, siempre visible.

   2. Las fotos salian pequenas: la rejilla hacia columnas de 220px, o sea
      cinco por fila en pantalla ancha.

   3. La tarjeta no reservaba sitio para el boton, asi que cada una acababa
      a una altura distinta.
   ========================================================================== */

/* La tarjeta manda su propio orden: lo de abajo, abajo */
.woocommerce ul.products li.product{
  display:flex !important;
  flex-direction:column;
  padding:.85rem .85rem 1rem !important;
}

/* El precio, justo encima del boton y sin que nada se le monte */
.woocommerce ul.products li.product .price{
  position:relative;
  z-index:1;
  margin:0 0 .2rem !important;
  padding-right:0 !important;
}

/* EL BOTON: rectangulo ancho, pegado al fondo de la tarjeta */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button{
  position:static !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:auto !important;
  margin:auto 0 0 !important;      /* el auto de arriba lo empuja al fondo */
  padding:.72rem 1rem !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  font-family:var(--aft-mono);
  font-size:.72rem !important;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
  text-align:center;
  border-radius:3px !important;
  border:1px solid rgba(0,242,255,.5) !important;
  background:rgba(0,242,255,.12) !important;
  color:var(--aft-cian) !important;
  transition:background .2s,color .2s,box-shadow .2s;
}

/* El carrito delante del texto, siempre a la vista */
.woocommerce ul.products li.product a.button::before,
.woocommerce ul.products li.product a.add_to_cart_button::before{
  content:"shopping_cart";
  font-family:"Material Symbols Outlined";
  font-size:17px;
  line-height:1;
  color:inherit;
  margin:0;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover{
  background:var(--aft-cian) !important;
  color:#05070a !important;
  box-shadow:0 0 16px rgba(0,242,255,.45);
}
.woocommerce ul.products li.product a.button:hover::before{color:#05070a}

/* Mientras se anade, y cuando ya esta anadido */
.woocommerce ul.products li.product a.button.loading{opacity:.75}
.woocommerce ul.products li.product a.added_to_cart{
  display:block;
  width:100%;
  margin-top:.4rem;
  text-align:center;
  font-family:var(--aft-mono);
  font-size:.66rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#7ee787;
  text-decoration:none;
}

/* La etiqueta de oferta, por encima del marco pero nunca del boton */
.woocommerce ul.products li.product .onsale{z-index:6}


/* ==========================================================================
   LOS ICONOS DEL MENU, A LA DERECHA

   El tema pinta <icono><texto>. Como el enlace es flex, basta con mandar el
   icono al final; no hace falta tocar el tema ni cambiar el marcado.
   ========================================================================== */
.af-nav li > a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.af-nav li > a .af-mi{order:2}
.af-nav li > a > span:not(.af-mi){order:1}

/* ==========================================================================
   DESPLEGABLE DE CATEGORIAS BAJO "TIENDA"
   ========================================================================== */
.af-nav li{position:relative}
.af-nav .sub-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:230px;
  margin:0;
  padding:.4rem 0;
  list-style:none;
  background:#0a0d14;
  border:1px solid rgba(0,242,255,.25);
  border-radius:4px;
  box-shadow:0 14px 34px rgba(0,0,0,.6);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:200;
}
.af-nav li:hover > .sub-menu,
.af-nav li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.af-nav .sub-menu li{display:block;width:100%}
.af-nav .sub-menu li > a{
  display:flex !important;
  width:100%;
  padding:.5rem .9rem;
  font-family:var(--aft-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#c7d5e0;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s,color .15s;
}
.af-nav .sub-menu li > a:hover{background:rgba(0,242,255,.1);color:var(--aft-cian)}
.af-nav .sub-menu .aft-cat-todas > a{
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:.25rem;
  padding-bottom:.6rem;
  color:var(--aft-cian);
}
/* En el desplegable no hacen falta iconos */
.af-nav .sub-menu .af-mi{display:none}

/* ==========================================================================
   BARRA DE CATEGORIAS EN LA TIENDA
   ========================================================================== */
.aft-filtros{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:0 0 1.6rem;
  padding:0 0 1.2rem;
  border-bottom:1px solid var(--aft-borde);
}
.aft-filtros-titulo{
  font-family:var(--aft-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6b7a86;
  margin-right:.4rem;
}
.aft-filtro{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .85rem;
  border:1px solid var(--aft-borde);
  border-radius:999px;
  font-family:var(--aft-mono);
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#c7d5e0;
  text-decoration:none;
  transition:border-color .18s,color .18s,background .18s;
}
.aft-filtro:hover{border-color:rgba(0,242,255,.5);color:var(--aft-cian)}
.aft-filtro-activo{
  background:rgba(0,242,255,.12);
  border-color:var(--aft-cian);
  color:var(--aft-cian);
}
.aft-filtro-n{
  font-size:.62rem;
  opacity:.6;
  padding:.05rem .3rem;
  border-radius:3px;
  background:rgba(255,255,255,.07);
}

@media (max-width:600px){
  .aft-filtros{gap:.4rem}
  .aft-filtro{font-size:.65rem;padding:.35rem .7rem}
}


/* ==========================================================================
   LA PANTALLA DE ACCESO

   Salia pegada a la izquierda, en una caja estrecha y con el titulo
   descolgado a un lado: lo primero que ve alguien que pincha "Soporte" sin
   haber entrado, y quedaba descuidado. Ahora va centrada, con un ancho
   comodo y todo alineado.
   ========================================================================== */
/* Sin sesion no hay menu lateral, asi que el grid de dos columnas de "Mi
   cuenta" sobra: dejaba el formulario metido en una columna estrechisima.
   Aqui se vuelve a una sola columna centrada. */
.woocommerce-account:not(.logged-in) .woocommerce{
  display:block !important;
  grid-template-columns:none !important;
  max-width:460px;
  margin:0 auto;
  padding:2rem 1rem 0;
  width:100%;
}

.woocommerce-account:not(.logged-in) .woocommerce > h2{
  text-align:center;
  font-family:var(--aft-display);
  font-size:1.5rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 1.6rem;
}

.woocommerce-account:not(.logged-in) form.woocommerce-form-login{
  width:100%;
  margin:0;
  padding:2rem 1.9rem 1.8rem;
  background:var(--aft-panel);
  border:1px solid var(--aft-borde);
  border-radius:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}

.woocommerce-account:not(.logged-in) form.woocommerce-form-login .form-row{
  width:100% !important;
  float:none !important;
  margin:0 0 1.15rem;
  padding:0;
}

.woocommerce-account:not(.logged-in) form.woocommerce-form-login label{
  display:block;
  margin-bottom:.45rem;
  font-family:var(--aft-mono);
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#9fb2c0;
}

.woocommerce-account:not(.logged-in) form.woocommerce-form-login .input-text{
  width:100% !important;
  padding:.72rem .85rem;
  background:#080b12;
  border:1px solid var(--aft-borde);
  border-radius:4px;
  color:#e6f1f8;
  font-size:.9rem;
  transition:border-color .18s,box-shadow .18s;
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login .input-text:focus{
  outline:none;
  border-color:var(--aft-cian);
  box-shadow:0 0 0 3px rgba(0,242,255,.15);
}

/* "Recuerdame" y el boton, cada uno en su linea */
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.1rem;
  font-family:var(--aft-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#9fb2c0;
  cursor:pointer;
}
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input{margin:0}

.woocommerce-account:not(.logged-in) form.woocommerce-form-login button[type="submit"]{
  width:100%;
  padding:.85rem 1rem;
  background:var(--aft-cian) !important;
  color:#05070c !important;
  border:none !important;
  border-radius:4px !important;
  font-family:var(--aft-mono);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s,box-shadow .2s;
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login button[type="submit"]:hover{
  background:#5df6ff !important;
  box-shadow:0 0 20px rgba(0,242,255,.45);
}

.woocommerce-account:not(.logged-in) .woocommerce-LostPassword{
  margin:1.1rem 0 0;
  text-align:center;
  font-size:.8rem;
}
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a{
  color:#9fb2c0;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a:hover{
  color:var(--aft-cian);
  border-color:var(--aft-cian);
}

/* El titulo grande de la pagina, centrado sobre el formulario y no colgando
   a un lado, que era lo que descuadraba toda la pantalla */
.woocommerce-account:not(.logged-in) .af-section__head{
  max-width:460px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:2rem;
  padding:0 1rem;
  text-align:center;
}

/* --------------------------------------------------------------------------
   El cartel que explica por que se pide entrar
   -------------------------------------------------------------------------- */
.aft-porque{
  width:100%;
  margin:0 0 1.5rem;
  padding:1rem 1.15rem;
  background:rgba(0,242,255,.06);
  border:1px solid rgba(0,242,255,.28);
  border-left-width:3px;
  border-radius:4px;
  text-align:left;
}
.aft-porque strong{
  display:block;
  font-family:var(--aft-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--aft-cian);
  margin-bottom:.35rem;
}
.aft-porque span{
  display:block;
  font-size:.86rem;
  line-height:1.5;
  color:#b8c7d3;
}


/* ==========================================================================
   FINALIZAR COMPRA: dos cosas que se veian mal

   1. En los desplegables (Pais/Region y Provincia) la etiqueta se montaba
      encima del valor: "Pais/Region" pisaba a "Espana" y "Provincia" a
      "Toledo". Pasa porque un desplegable SIEMPRE tiene valor, asi que la
      etiqueta esta siempre en su sitio pequeno, pero no habia hueco reservado
      arriba. Se le da mas altura al campo y se sube la etiqueta.

   2. El numero de articulos sobre la miniatura salia del mismo color que su
      fondo (gris claro sobre gris claro), asi que el "1" no se leia.
   ========================================================================== */

/* --- 1. Los desplegables del checkout --- */
.wc-block-components-country-input,
.wc-block-components-state-input{
  height:auto !important;
}

.wc-block-components-country-input select,
.wc-block-components-state-input select{
  height:58px !important;
  padding:26px 32px 8px 12px !important;
  line-height:1.25;
}

.wc-block-components-country-input label,
.wc-block-components-state-input label{
  top:8px !important;
  transform:none !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.04em;
  opacity:.75;
}

/* Los campos de texto, a la misma altura para que la fila quede pareja */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"]{
  height:58px !important;
  padding:24px 12px 8px !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label{
  top:8px !important;
  font-size:11px !important;
  line-height:1 !important;
}

/* Un poco mas de aire entre filas, que iban muy justas */
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-country-input,
.wc-block-components-address-form .wc-block-components-state-input{
  margin-bottom:1.1rem !important;
}

/* --- 2. El contador de articulos de la miniatura --- */
.wc-block-components-order-summary-item__quantity{
  background:var(--aft-cian) !important;
  color:#05070c !important;
  border:2px solid var(--aft-panel) !important;
  min-width:22px !important;
  height:22px !important;
  line-height:18px !important;
  font-weight:700 !important;
  font-size:12px !important;
  text-align:center;
  border-radius:999px !important;
  box-shadow:0 0 0 1px rgba(0,242,255,.35);
}

/* El resumen del pedido, un poco mas legible */
.wc-block-components-order-summary-item__description .wc-block-components-product-name{
  line-height:1.35;
}


/* ==========================================================================
   CATEGORIAS CON SUBCATEGORIAS

   Antes salian todas en fila, asi que «STL» y «Campanas» parecian dos cosas
   sueltas cuando una esta dentro de la otra. Ahora se ve de un vistazo cual
   cuelga de cual.
   ========================================================================== */

/* --- En el desplegable del menu --- */
.af-nav .sub-menu .aft-cat-hija > a{
  padding-left:1.9rem;
  font-size:.68rem;
  opacity:.85;
}
.af-nav .sub-menu .aft-cat-hija > a::before{
  content:"└";
  position:absolute;
  left:.95rem;
  opacity:.45;
}
.af-nav .sub-menu .aft-cat-hija > a{position:relative}
.af-nav .sub-menu .aft-cat-nieta > a{padding-left:2.9rem;font-size:.66rem;opacity:.75}

/* --- En la barra de la tienda --- */
.aft-filtros{
  display:block;
  padding-bottom:1rem;
}
.aft-filtros-fila{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}
.aft-filtros-hijas{
  margin-top:.7rem;
  padding-top:.7rem;
  border-top:1px dashed rgba(255,255,255,.1);
}
.aft-filtros-dentro{color:#00b8d4}

/* La flechita de «esta tiene cosas dentro» */
.aft-filtro-tiene{
  font-size:.6rem;
  opacity:.55;
  margin-left:.1rem;
}

/* Las subcategorias, algo mas discretas que sus padres */
.aft-filtro-hija{
  font-size:.66rem;
  padding:.35rem .75rem;
  border-style:dashed;
}
.aft-filtro-hija.aft-filtro-activo{border-style:solid}