/* ==========================================================================
   PROS FC · lo común a todas las páginas
   Colores, cabecera y pie. Lo cargan la portada y «Todos los productos»
   (con home.css) y las páginas que maqueta Blocksy (con store.css): ficha,
   carrito, pago, cuenta, legales. Por eso nada de aquí depende de los estilos
   globales de una u otra hoja: cada regla se basta sola.
   ========================================================================== */
:root {
  --bg:      #050C12;
  --bg-2:    #08141D;
  --panel:   #0B1A25;
  --panel-2: #0F2230;
  --line:    rgba(255,255,255,.08);
  --line-2:  rgba(255,255,255,.14);
  --em:      #18A878;
  --em-hi:   #2BD497;
  --em-glow: rgba(24,168,120,.45);
  --silver:  #EAF0F3;
  --text:    #B6C6CF;
  --dim:     #8FA2AE;
  --dim-2:   #5F7482;
  --gold:    #F2C14E;
  --red:     #F06060;
  --display: 'Unbounded', 'Arial Black', sans-serif;
  --sans:    'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:  18px;
  --r-s: 12px;
  /* Ancho de la página (cabecera, secciones, pie y páginas de Blocksy), márgenes incluidos: 1240 px hasta
     pantallas de ~1400 px y desde ahí el 88 % de la pantalla, hasta 1600 px. Con un tope fijo, en una
     pantalla de 1920 el contenido se quedaba en el 61 % del ancho. */
  --wrap: clamp(1240px, 88vw, 1600px);
}

/* Todo va acotado a la cabecera (.top) y al pie (.foot): WooCommerce y WordPress usan los mismos nombres
   (.cart es la tabla del carrito y el formulario de «Añadir al carrito», .menu los menús de WP…).
   En las páginas de Blocksy los enlaces, botones y selects traen su propio estilo: aquí se neutraliza
   sin sumar especificidad (:where), para que cualquier regla de abajo gane. */
:where(.top, .foot) a { color: inherit; text-decoration: none; }
:where(.top) button { font: inherit; color: inherit; background: none; border: 0; box-shadow: none; cursor: pointer; }
:where(.top, .foot) img { max-width: 100%; height: auto; display: block; }
:where(.top) [hidden] { display: none !important; }

/* .wrap también lo usan las secciones de la portada (home.css); aquí, acotado: en las páginas de Blocksy hay plugins con su propio .wrap */
:is(.top, .foot) .wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 36px); }

/* ---------------- cabecera ---------------- */
header.top { position: sticky; top: 0; z-index: 50; background: rgba(5,12,18,.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); font-family: var(--sans); line-height: 1.55; }
.top .top-in { display: flex; align-items: center; gap: 20px; height: 70px; }
:is(.top, .foot) .logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .01em; white-space: nowrap; }
.top .logo { color: var(--silver); }  /* en el pie hereda el gris de los enlaces */
:is(.top, .foot) .logo img { width: 42px; }
.top .nav { display: none; gap: 4px; margin-left: 10px; }
.top .nav a { padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--dim); white-space: nowrap; transition: color .15s, background .15s; }
.top .nav a:hover { color: var(--silver); background: rgba(255,255,255,.05); }
.top .nav a.on { color: var(--silver); background: rgba(255,255,255,.06); }
.top .top-r { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--silver); }
.top .cart, .top .acct { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.05); }
.top .cart svg, .top .acct svg { width: 19px; height: 19px; }
.top .acct { background: none; color: var(--dim); transition: color .15s, background .15s; }
.top .acct:hover { color: var(--silver); background: rgba(255,255,255,.05); }
.top .acct.on { color: var(--silver); background: rgba(255,255,255,.06); }
/* artículos en el carrito: llega por JS (el HTML se cachea igual para todos) salvo en carrito, pago y cuenta, que nunca se cachean */
.top .cart-n { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--em); color: #02130C; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; }
/* «Mi cuenta» está en el menú desplegable: en la barra solo cuando cabe */
@media (max-width: 1239px) { .top .acct { display: none; } }
.top .soc { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--dim); transition: color .15s, background .15s; }
.top .soc:hover { color: var(--silver); background: rgba(255,255,255,.05); }
.top .soc svg { width: 19px; height: 19px; }
/* Menú, moneda, redes y carrito solo caben juntos desde 1240px; entre 1100 y 1239 las redes
   de la cabecera se quitan (están en su sección y en el pie) y por debajo de 1100 se quita el menú. */
@media (min-width: 1100px) { .top .nav { display: flex; } }
@media (min-width: 1100px) and (max-width: 1239px) { .top .top-r .soc { display: none; } }
/* selector de moneda (solo sale si la tienda tiene el conversor con más de una divisa) */
.top .cur { display: block; margin: 0; }
.top .cur-sel {
  appearance: none; -webkit-appearance: none; width: auto; min-height: 0; height: 42px; margin: 0; padding: 0 30px 0 12px; border-radius: 12px; cursor: pointer; box-shadow: none;
  background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238FA2AE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--line); color: var(--silver); font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.top .cur-sel:hover { border-color: var(--line-2); }
.top .cur-sel option { background: var(--panel); color: var(--silver); }
/* en móvil no caben logo, moneda, redes, carrito y menú: las redes van dentro del menú */
@media (max-width: 519px) {
  .top .top-in { gap: 10px; }
  .top .top-r { gap: 6px; }
  .top .soc { display: none; }
  :is(.top, .foot) .logo { gap: 8px; font-size: 15px; }
  :is(.top, .foot) .logo img { width: 38px; }
  .top .cur-sel { padding: 0 24px 0 10px; background-position: right 9px center; }
}

/* botón y panel del menú (por debajo de 1100 px, donde no cabe la barra) */
.top .menu-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.05); }
.top .menu-btn svg { width: 20px; height: 20px; }
.top .menu-btn .menu-close, .top .menu-btn[aria-expanded="true"] .menu-open { display: none; }
.top .menu-btn[aria-expanded="true"] .menu-close { display: block; }
@media (min-width: 1100px) { .top .menu-btn, .top .menu { display: none !important; } }
/* Fondo sólido: dentro de .top (que ya lleva backdrop-filter) un fondo translúcido deja ver la página a través */
.top .menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--line-2);
  box-shadow: 0 24px 40px -20px rgba(0,0,0,.8);
}
.top .menu-in { display: grid; gap: 14px; padding-top: 14px; padding-bottom: 18px; }
.top .menu-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.top .menu-links a { padding: 11px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--silver); background: rgba(255,255,255,.03); }
.top .menu-links a:hover { background: rgba(255,255,255,.07); }
.top .menu-soc { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 2px 4px 0; }
.top .menu-soc a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dim); }
.top .menu-soc svg { width: 18px; height: 18px; color: var(--em-hi); }

/* ---------------- pie ---------------- */
footer.foot { margin-top: clamp(56px, 9vw, 96px); padding: 30px 0 40px; border-top: 1px solid var(--line); font-family: var(--sans); line-height: 1.55; }
.foot .foot-in { display: grid; gap: 18px; font-size: 13px; color: var(--dim); }
@media (min-width: 820px) { .foot .foot-in { grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; } }
.foot .foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot .foot-links a:hover { color: var(--silver); }

/* ---------------- convivencia con WordPress ---------------- */
/* barra de administración de WP (32px, 46px en móvil) */
.admin-bar header.top { top: 32px; }
@media (max-width: 782px) { .admin-bar header.top { top: 46px; } }
/* Snippets de WPCode que se inyectan en todas las páginas: la barra «OFERTA … DTO» al abrir el body,
   el aviso «X acaba de comprar» y el banner de redes. En las páginas del tema no pintan nada
   (las ofertas de verdad salen tachadas en el precio y las redes tienen su bloque). */
#fc-toast, .fc-banner, .foot .prosfc-social-banner { display: none !important; }