/**
 * Archivo: assets/css/cabecera-pie.css
 * Módulo: shop-core — estilos de la cabecera y el pie a medida,
 * compartidos por TODAS las pantallas del sitio (portada, ficha de
 * producto, categoría, carrito, checkout, cuenta...).
 *
 * Se enqueuea siempre, en cada carga de página (includes/cabecera-pie.php),
 * a diferencia de templates/inicio/assets/css/inicio.css, que ahora
 * solo contiene el layout específico de la portada y sigue cargando
 * únicamente ahí.
 *
 * Usa las variables de assets/css/variables.css (--sc-gold, --sc-bg,
 * etc.) — para cambiar colores/fuentes, se edita ahí, no aquí.
 */

/* ===== Cabecera ===== */
.sc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 56px;
    min-height: 56px;
    background: var(--sc-surface);
    border-bottom: 1px solid rgba(var(--sc-gold-rgb), 0.3);
    z-index: 100;
}

.sc-logo {
    font-family: var(--sc-font-title);
    font-size: var(--sc-fs-logo);
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--sc-gold);
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    transition: color 0.2s, text-shadow 0.2s;
}

.sc-logo:hover {
    color: #E8CC7A;
    text-shadow: 0 0 14px rgba(var(--sc-gold-rgb), 0.55);
}

/* Logo de imagen delante del texto (1/10/2026, ver sc_logo_img_html()). El
   logo tiene fondo negro opaco: con mix-blend-mode:lighten el negro toma el
   color de la cabecera (#111) y el dorado queda igual, sin recuadro. */
.sc-logo { display: inline-flex; align-items: center; gap: 0.65rem; }
/* ".sc-logo .sc-logo-img" y no solo ".sc-logo-img" (2/10/2026, Javier: el logo
   era más grande en las categorías que en la portada): en las páginas de
   WooCommerce, ".woocommerce-page img { height: auto }" pesa más que una
   sola clase y le quitaba los 34 px (salía a 44). */
.sc-logo .sc-logo-img { display: block; height: 34px; width: auto; max-width: none; mix-blend-mode: lighten; flex-shrink: 0; }
@media (max-width: 1280px) { .sc-logo .sc-logo-img { height: 30px; } }
/* En el móvil no caben logo + texto + iconos: solo el logo (si lo hay). */
@media (max-width: 480px) {
    .sc-logo .sc-logo-img { height: 32px; }
    .sc-logo-img + .sc-logo-texto { display: none; }
}

/* "MAISON HAGANE" más grande, del alto del logo (1/10/2026, Javier: "pon las
   letras de Maison Hagane más grandes, del tamaño del logo"). Tamaños medidos
   en la web real según el hueco que deja el menú de categorías: en pantalla
   grande el texto mide lo mismo que el logo (20-22 px de letra = 33-36 px de
   alto); entre 900 y 1280 px se reduce para no pegarse al menú. Solo la
   cabecera: el pie no cambia. */
.sc-header .sc-logo { font-size: clamp(18px, 1.4vw, 22px); }
@media (max-width: 1280px) { .sc-header .sc-logo { font-size: 16px; } }
@media (max-width: 1100px) { .sc-header .sc-logo { font-size: 14px; } }
@media (max-width: 1000px) { .sc-header .sc-logo { font-size: 12px; } }
@media (max-width: 900px)  { .sc-header .sc-logo { font-size: 18px; } }

/* Texto centrado con las letras M y H del logo (1/10/2026, Javier: "lo
   quiero alineado al medio, no abajo"). Centrado con la imagen entera quedaba
   alto, porque el dibujo tiene la flor de lis por encima de las letras: el
   centro de la M y la H está 3,2-4 px más abajo en todas las pantallas
   (medido en la web). Solo si hay logo; position:relative no mueve nada más.
   (v0.1.444 lo apoyaba en la base de las letras, ~8 px: no era lo que quería.) */
.sc-logo-img + .sc-logo-texto { position: relative; top: 3.7px; }

/* Marca "MAISON HAGANE" en dos tonos (8/9/2026) — se usa igual en la
   cabecera (.sc-logo) y en el pie (.sc-footer-copy). Ver sc_marca_html()
   en includes/base/cabecera-pie.php. */
.sc-marca-claro { color: #fff; }
.sc-marca-oro   { color: var(--sc-gold); }
.sc-logo:hover .sc-marca-claro { color: #fff; }
.sc-logo:hover .sc-marca-oro   { color: #E8CC7A; }

.sc-nav-links {
    display: flex;
    gap: 1.8rem;
    flex-wrap: wrap;
}

.sc-nav-links a {
    font-size: var(--sc-fs-nav);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sc-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.sc-nav-links a:hover { color: var(--sc-gold); }

.sc-header-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.sc-header-right a {
    color: var(--sc-muted);
    font-size: clamp(14.40px, calc(10.281px + 0.3015vw), 18px);
    text-decoration: none;
    position: relative;
    transition: color 0.2s;
}

.sc-header-right a:hover { color: var(--sc-gold); }

/* Saludo "Hola, nombre" con sesión iniciada (templates/comunes/cabecera.php).
   Letra más pequeña que el resto de .sc-header-right (que son iconos de
   18px), en dorado fijo — sin cambio de color al hover. Selector
   ".sc-header-right a.sc-header-saludo" (no solo ".sc-header-saludo")
   porque ".sc-header-right a" de arriba tiene más especificidad
   (clase + etiqueta) que una sola clase — sin esto, el dorado se veía
   pisado por el color var(--sc-muted) de esa regla general. */
.sc-header-right a.sc-header-saludo {
    font-size: 0.75rem;
    color: var(--sc-gold);
    white-space: nowrap;
}

.sc-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--sc-gold);
    color: var(--sc-bg);
    font-size: clamp(7.20px, calc(5.141px + 0.1508vw), 9px);
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sc-font-body);
}

/* Icono "Pendientes" (campana) + su contador — cabecera.php, agosto
   2026, a petición de Javier. Mismo tamaño que .sc-cart-count, pero en
   naranja (mismo acento de alerta que ya usa el resto del sitio para
   "esto necesita tu atención", ver idioma-kit-diccionario.php) en vez
   de dorado, para distinguirse a simple vista del contador del carrito
   que tiene justo al lado. */
.sc-pendientes-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #e65100;
    color: #fff;
    font-size: clamp(7.20px, calc(5.141px + 0.1508vw), 9px);
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sc-font-body);
}

/* Franja de aviso "Tienes N pendientes" — cabecera.php, se pinta justo
   debajo de .sc-header (hijo directo de <body>, como la cabecera y el
   pie) cuando hay algo pendiente para quien ha iniciado sesión.
   flex-shrink:0 por el mismo motivo que .sc-header/.sc-footer más
   abajo: sin esto, en una ventana baja el esquema "cabecera/pie fijos"
   podría encogerla en vez de encoger el cuerpo con scroll. */
.sc-aviso-pendientes {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 2rem;
    background: rgba(230, 81, 0, 0.12);
    border-bottom: 1px solid rgba(230, 81, 0, 0.35);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
}

.sc-aviso-pendientes-texto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sc-text);
}

.sc-aviso-pendientes-texto i {
    color: #e65100;
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
}

.sc-aviso-pendientes-enlace {
    color: var(--sc-gold);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.sc-aviso-pendientes-enlace:hover {
    color: #E8CC7A;
}

.sc-aviso-pendientes-cerrar {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--sc-muted);
    font-size: clamp(16.00px, calc(11.424px + 0.3350vw), 20px);
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
}

.sc-aviso-pendientes-cerrar:hover {
    color: var(--sc-text);
}

/* Selector de idioma propio (banderas reales, no emoji), reutilizando
   la cookie e idiomas de IdiomaKit por debajo, sin tocar el archivo
   original del módulo. */
.sc-idioma-selector {
    position: relative;
    margin-left: 0.4rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(var(--sc-gold-rgb), 0.3);
}

.sc-idioma-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 3px;
    overflow: hidden;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.sc-idioma-btn:hover { opacity: 1; }

.sc-idioma-lista {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.3);
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    z-index: 200;
    min-width: 150px;
}

.sc-idioma-lista.sc-idioma-abierto { display: flex; }

.sc-idioma-opcion {
    background: none;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    transition: background 0.2s;
}

.sc-idioma-opcion span {
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-nav);
    font-weight: 800;
    white-space: nowrap;
}

.sc-idioma-opcion:hover {
    background: rgba(var(--sc-gold-rgb), 0.12);
}

.sc-idioma-opcion:hover span {
    color: var(--sc-gold);
}

/* Selector "Enviar a: [país]" (23/9/2026) — mismo lenguaje visual que el
   selector de idioma de al lado (borde dorado, lista desplegable), con
   scroll propio porque son ~28 países. Ver producto-pais-visitante.php. */
.sc-pais-selector {
    position: relative;
    margin-left: 0.4rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(var(--sc-gold-rgb), 0.3);
}
.sc-pais-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-nav);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.85;
    transition: opacity 0.2s, color 0.2s;
}
.sc-pais-btn:hover,
.sc-pais-btn.sc-pais-btn-con-pais { opacity: 1; }
.sc-pais-btn.sc-pais-btn-con-pais { color: var(--sc-gold); }
.sc-pais-lista {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.3);
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    z-index: 200;
    min-width: 200px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
}
.sc-pais-lista.sc-pais-abierto { display: flex; }
.sc-pais-opcion {
    background: none;
    border: none;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 3px;
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-nav);
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.sc-pais-opcion:hover { background: rgba(var(--sc-gold-rgb), 0.12); color: var(--sc-gold); }
.sc-pais-opcion.sc-pais-opcion-activa { color: var(--sc-gold); }
.sc-pais-opcion-todos { border-bottom: 1px solid rgba(var(--sc-gold-rgb), 0.2); border-radius: 3px 3px 0 0; margin-bottom: 4px; }

/* Aviso de "país detectado" (fase 2, 23/9/2026): sale unos segundos bajo el
   selector solo cuando el país se ha puesto solo; pulsarlo abre la lista. */
.sc-pais-aviso {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    z-index: 199;
    padding: 10px 12px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-gold);
    border-radius: 6px;
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-nav);
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.sc-pais-aviso[hidden] { display: none; }

/* Selector de gestión (Historial, Diccionario...) — mismo patrón
   visual que el selector de idioma, solo con texto en vez de
   banderas. Lista fácil de ampliar: ver templates/comunes/cabecera.php,
   $sc_opciones_gestion. */
.sc-gestion-selector {
    position: relative;
}

.sc-gestion-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--sc-muted);
    font-size: clamp(14.40px, calc(10.281px + 0.3015vw), 18px);
    opacity: 0.85;
    transition: opacity 0.2s, color 0.2s;
}

.sc-gestion-btn:hover {
    opacity: 1;
    color: var(--sc-gold);
}

.sc-gestion-lista {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.3);
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    z-index: 200;
    min-width: 220px;
}

.sc-gestion-lista.sc-gestion-abierto { display: flex; }

.sc-gestion-opcion {
    background: none;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
}

.sc-gestion-opcion i {
    color: var(--sc-gold);
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    flex-shrink: 0;
}

.sc-gestion-opcion span {
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-nav);
    font-weight: 600;
    white-space: nowrap;
}

.sc-gestion-opcion:hover {
    background: rgba(var(--sc-gold-rgb), 0.12);
}

.sc-gestion-opcion:hover span {
    color: var(--sc-gold);
}

/* Interruptor "Carga masiva y gestión múltiple" (24/9/2026): con el modo
   activo se marca con un ✓ dorado al final. */
.sc-gestion-opcion-masivo,
.sc-gestion-opcion-busqueda { width: 100%; text-align: left; }
body.sc-modo-masivo .sc-gestion-opcion-masivo::after,
body.sc-modo-busqueda .sc-gestion-opcion-busqueda::after {
    content: "\2713";
    margin-left: auto;
    color: var(--sc-gold);
    font-weight: 700;
}

/* Stock mínimo para mostrarse (26/9/2026): número al final de la fila. */
.sc-gestion-opcion-stock { width: 100%; cursor: default; }
/* Avisos por email (28/9/2026) y registro de rendimiento (29/9/2026):
   casilla al final de la fila. */
.sc-gestion-opcion-avisos,
.sc-gestion-opcion-perfil { width: 100%; cursor: pointer; }
.sc-gestion-lista input[type="checkbox"]#sc-avisos-email-input,
.sc-gestion-lista input[type="checkbox"]#sc-perfil-input {
    margin: 0 0 0 auto;
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    accent-color: var(--sc-gold);
    cursor: pointer;
}
/* Selector reforzado: los estilos de input[type=number] del tema Astra
   (relleno grande, altura fija) ganaban a la clase sola y tapaban el número. */
.sc-gestion-lista input[type="number"].sc-gestion-stock-input {
    margin: 0 0 0 auto;
    flex: 0 0 auto;
    width: 5.5em;
    min-width: 5.5em;
    height: auto;
    min-height: 0;
    padding: 3px 6px;
    line-height: 1.3;
    background: #1c1c1c;
    color: #F5F0E8;
    -webkit-text-fill-color: #F5F0E8;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.5);
    border-radius: 3px;
    box-shadow: none;
    font-size: var(--sc-fs-nav);
    font-family: var(--sc-font-body);
    text-align: right;
    opacity: 1;
}

/* ===== Pie ===== */
.sc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 44px;
    min-height: 44px;
    background: var(--sc-surface);
    border-top: 1px solid rgba(var(--sc-gold-rgb), 0.3);
}

.sc-footer-copy {
    font-size: var(--sc-fs-nav);
    color: var(--sc-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sc-footer-links { display: flex; gap: 1.5rem; }

/* span = página aún sin crear (28/9/2026): mismo aspecto, sin enlace. */
.sc-footer-links a,
.sc-footer-links span {
    font-size: var(--sc-fs-nav);
    color: var(--sc-muted);
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.sc-footer-links a:hover { color: var(--sc-gold); }

/* ===== Cabecera y pie fijos, solo el cuerpo hace scroll =====
   La portada no lo necesita (ya tiene su propio diseño de una sola
   pantalla, sin scroll, con height:100vh). En el resto de páginas
   (categoría, producto, carrito...), el body ocupa exactamente el
   alto de la ventana y no se desplaza: la cabecera y el pie quedan
   fijos arriba/abajo, y solo el contenido intermedio (lo que haya
   entre ambos, p.ej. <main class="sc-categoria">) hace scroll interno.
   Para que una plantilla nueva se beneficie de esto automáticamente,
   su contenedor principal debe llevar flex:1; min-height:0;
   overflow-y:auto — mismo criterio que .sc-categoria más abajo. */
body:not(.sc-inicio-body) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* Móvil (29/9/2026, Javier: "en el móvil, cuando entro en historias pierdo
       la cabecera"): 100vh en el móvil es el alto con la barra del navegador
       ESCONDIDA, así que con la barra visible la página sobresalía y, al
       terminar de desplazar el texto de una historia, se arrastraba la página
       entera y la cabecera salía por arriba. 100dvh = alto visible real (los
       navegadores antiguos se quedan con el 100vh de la línea anterior). */
    height: 100dvh;
    overflow: hidden;
}

/* Y la página nunca se desplaza entera (ni por unos píxeles de un elemento
   auxiliar que sobresalga): solo la zona central tiene scroll. */
html:has(> body:not(.sc-inicio-body)) {
    height: 100%;
    overflow: hidden;
}

/* Con sesión iniciada, WordPress añade una barra de administración
   fija arriba y empuja toda la página hacia abajo con un margen —
   sin este ajuste, los últimos px del body (donde cae el pie) quedan
   fuera de la pantalla, inalcanzables porque el body tiene
   overflow:hidden. 32px en escritorio, 46px en móvil — son los altos
   fijos que usa WordPress para su barra, no un valor inventado. */
body.admin-bar:not(.sc-inicio-body) {
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar:not(.sc-inicio-body) {
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
}

body:not(.sc-inicio-body) > .sc-header {
    flex-shrink: 0;
}

body:not(.sc-inicio-body) > .sc-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* Redundancia defensiva: garantiza que la cabecera y el pie no se
   encojan y que el pie se quede abajo del todo, sin depender de que
   el selector de hijo directo (>) de arriba encaje exactamente con
   la estructura interna que generan sc_render_cabecera()/
   sc_render_pie() en cada plantilla propia. */
.sc-header {
    flex-shrink: 0;
}

.sc-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/**
 * Contenedor del cuerpo en las plantillas propias de gestión
 * (templates/gestion/historial.php, templates/gestion/diccionario.php)
 * — se lleva todo el alto que quede entre cabecera y pie (flex:1).
 * Cada pantalla decide dentro de sí misma qué partes se quedan fijas
 * y cuál hace scroll (ver historial.css e idioma-kit-diccionario.php).
 */
.sc-gestion-cuerpo {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ===== Responsive: oculta el menú de categorías en pantallas pequeñas ===== */
@media (max-width: 900px) {
    .sc-nav-links { display: none; }
}

/* ===== Cabecera en pantallas pequeñas (25/9/2026): el menú de categorías se
   partía en DOS líneas y se salía de la barra (a 1100px). Con menos
   separación y menos espaciado entre letras cabe en una sola línea; nunca se
   parte (nowrap). Por debajo de 900px sigue ocultándose, como antes. ===== */
@media (max-width: 1280px) {
    .sc-nav-links { gap: 1.1rem; flex-wrap: nowrap; }
    .sc-nav-links a { letter-spacing: 1.2px; white-space: nowrap; }
    .sc-logo { letter-spacing: 2px; }
    .sc-header { padding: 0 1.2rem; }
    .sc-header-right { gap: 0.9rem; }
}
@media (max-width: 1100px) {
    .sc-nav-links { gap: 0.9rem; }
    .sc-nav-links a { letter-spacing: 0.8px; }
}

/* ===== Títulos del menú de la cabecera, más pequeños y en TODAS las pantallas
   (25/9/2026, Javier: "sigue la cabecera amontonada; haz con letras más
   pequeñas los títulos: Katanas & Samuráis, Antigüedad & Templarios, Leyendas
   & Cultura Pop, Guerras & Militar"). Tamaño propio del menú (ya no depende de
   --sc-fs-nav, que usan otras cosas): 10,4px en pantallas pequeñas hasta 12px
   en las grandes (antes 11,6-14,5px), con menos espaciado entre letras y entre
   títulos. Va al final del archivo para ganar a las reglas de arriba. ===== */
.sc-nav-links { gap: clamp(0.8rem, 1.7vw, 1.9rem); }
.sc-nav-links a {
    font-size: clamp(9.6px, 0.72vw, 11px);   /* 25/9/2026: otra vez un poco más pequeña */
    letter-spacing: clamp(0.5px, 0.1vw, 1.4px);
}
@media (max-width: 1000px) {
    .sc-nav-links { gap: 0.7rem; }
    .sc-nav-links a { font-size: 9.4px; letter-spacing: 0.4px; }
    .sc-logo { letter-spacing: 1px; }
    .sc-header-right { gap: 0.7rem; }
}

/* ===== Pie con 5 enlaces (29/9/2026, páginas legales): en pantallas estrechas
   deja de tener 44px fijos y baja a dos líneas centradas (antes, ya con 3
   enlaces, "Contacto" se cortaba en el móvil). ===== */
.sc-footer-links { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) {
    .sc-footer {
        height: auto;
        min-height: 44px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem 1rem;
        padding: 0.45rem 1rem;
    }
    .sc-footer-links { justify-content: center; gap: 0.3rem 1rem; }
    .sc-footer-links a,
    .sc-footer-links span { letter-spacing: 0.5px; }
}