/* Theme Name: Woodmart Child Description: Woodmart Child Theme Author: XTemos Author URI: http://xtemos.com Template: woodmart Version: 1.0.0 Text Domain: woodmart */ /* 2026-07-14 · Fuentes autoalojadas (antes venían de fonts.googleapis.com, que bloqueaba el pintado 942 ms). Mismas @font-face que daba Google, pero apuntando a nuestro servidor. Solo subset 'latin': el español entra entero (ñ á é í ó ú ü). Bonus: ya no enviamos la IP del visitante a Google (RGPD). */ @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/urbanist.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/urbanist.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/urbanist.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/work-sans.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/work-sans.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------------ StockLider — CSS del tema hijo NOTA (2026-07-11): aquí había un parche para el buscador de Ajax Search Lite (su lupa de 42px desbordaba una caja de 28px). Ese plugin YA NO SE USA: se sustituyó por el buscador AJAX nativo de Woodmart (search_style=default, search_by_sku=1). El parche se eliminó por ser código muerto. ------------------------------------------------------------------ */ /* ═══════════════════════════════════════════════════════════ PORTADA StockLider — 2026-07-11 Bloques .sl-* usados en la página «Inicio» (ID 20087). Color de marca = naranja del tema (#F59A57). =══════════════════════════════════════════════════════════ */ /* Naranja = color de ACCIÓN (todo lo que hay que pulsar). Verde = color de MARCA (logo, iconos de categoría, acentos). */ :root{ --sl-orange:#F59A57; --sl-orange-d:#e07f36; --sl-ink:#1d1d1d; --sl-muted:#6b6b6b; --sl-line:#e8e8e8; --sl-teal:#00ab87; /* color de marca — el mismo del logo */ --sl-teal-d:#009676; --sl-teal-soft:#e2f5f0; } /* La portada va a sangre completa (full-bleed). OJO: en Woodmart el contenedor con max-width es .wd-content-layout.container, que es el PADRE de .site-content — no un hijo. */ body.home .wd-content-layout.container{max-width:100%;padding-left:0;padding-right:0;} body.home .wd-page-content{padding-top:0;padding-bottom:0;} body.home .wd-content-area{margin-bottom:0;} body.home .entry-content > *{margin-top:0;margin-bottom:0;} /* ── Botones ────────────────────────────────────────────── */ .sl-btn{display:inline-flex;align-items:center;justify-content:center; padding:14px 30px;border-radius:8px;font-weight:700;font-size:15px; line-height:1;text-decoration:none;transition:.2s ease;border:2px solid transparent;} /* 🔴 2026-08-10 · Contraste. El texto blanco sobre el naranja de marca da 2,18:1 y la norma AA pide 4,5:1 (los botones miden 14-15 px, así que NO entran en la excepción de «texto grande», que empieza en 18,66 px en negrita). NO se toca el naranja: es el color de acción de la marca y oscurecerlo hasta cumplir obligaría a llegar a #B85410, que ya es otro color. Se usa la solución que el propio sitio ya aplica en `.sl-cta .sl-btn`: texto oscuro sobre el naranja. Con --sl-ink (#1d1d1d, ya definido arriba) da **7,68:1** y 5,78:1 en hover. Cero colores nuevos, cero reglas nuevas: sólo cambia el valor de `color`. */ .sl-btn-primary{background:var(--sl-orange);color:var(--sl-ink);} .sl-btn-primary:hover{background:var(--sl-orange-d);color:var(--sl-ink);transform:translateY(-2px); box-shadow:0 8px 20px rgba(245,154,87,.35);} .sl-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);} .sl-btn-ghost:hover{background:#fff;color:var(--sl-ink);border-color:#fff;} .sl-btn-outline{background:transparent;color:var(--sl-ink);border-color:var(--sl-line);} .sl-btn-outline:hover{border-color:var(--sl-teal);color:var(--sl-teal);} .sl-btn-dark{background:var(--sl-ink);color:#fff;} /* En la franja verde el botón va NARANJA: máximo contraste = máxima conversión */ .sl-cta .sl-btn-primary{box-shadow:0 6px 18px rgba(0,0,0,.15);} .sl-cta .sl-btn-primary:hover{box-shadow:0 10px 26px rgba(0,0,0,.22);} .sl-btn-dark:hover{background:#000;color:#fff;transform:translateY(-2px);} /* ── HERO ───────────────────────────────────────────────── */ .sl-hero{ background:radial-gradient(120% 130% at 15% 0%,#2c2c2c 0%,#161616 55%,#0f0f0f 100%); padding:96px 20px 100px;text-align:center;position:relative;overflow:hidden;} .sl-hero:after{content:"";position:absolute;right:-140px;top:-140px; width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(0,171,135,.20) 0%,transparent 70%);} .sl-hero-inner{max-width:820px;margin:0 auto;position:relative;z-index:1;} .sl-badge{display:inline-block;padding:7px 16px;border-radius:100px; background:rgba(0,171,135,.16);border:1px solid rgba(0,171,135,.40); color:#3fd3b0;font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;margin-bottom:26px;} .sl-hero h1{color:#fff;font-size:52px;line-height:1.12;font-weight:800;margin:0 0 22px; letter-spacing:-.02em;} .sl-hero-sub{color:rgba(255,255,255,.72);font-size:18px;line-height:1.65;margin:0 auto 34px; max-width:640px;} .sl-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;} .sl-hero-note{color:rgba(255,255,255,.42);font-size:13px;margin:0;} /* ── Franja de confianza ────────────────────────────────── */ .sl-trust{display:grid;grid-template-columns:repeat(4,1fr); background:#fff;border-bottom:1px solid var(--sl-line);} .sl-trust > div{text-align:center;padding:26px 12px;border-right:1px solid var(--sl-line);} .sl-trust > div:last-child{border-right:0;} .sl-trust b{display:block;font-size:24px;font-weight:800;color:var(--sl-ink); line-height:1.2;margin-bottom:4px;} .sl-trust span{font-size:13px;color:var(--sl-muted);} /* ── Secciones ──────────────────────────────────────────── */ .sl-sec,.sl-why-wrap{padding:74px 20px;} .sl-sec-alt{padding-bottom:24px;} .sl-why-wrap{background:#fafafa;border-top:1px solid var(--sl-line);} .sl-sec-head{max-width:640px;margin:0 auto 44px;text-align:center;} .sl-sec-head h2{font-size:34px;font-weight:800;color:var(--sl-ink);margin:0 0 12px; letter-spacing:-.01em;} .sl-sec-head p{font-size:16px;color:var(--sl-muted);margin:0;line-height:1.6;} .sl-sec-more{text-align:center;margin-top:40px;} /* ── Rejilla de categorías ──────────────────────────────── */ /* flex 而非 grid:凑不满一行时,落单卡保持同样尺寸并自动居中(任何数量都成立) */ .sl-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:18px; max-width:1180px;margin:0 auto;} .sl-cats .sl-cat{flex:0 0 calc(25% - 13.5px);} .sl-cat{display:flex;flex-direction:column;align-items:center;text-align:center; background:#fff;border:1px solid var(--sl-line);border-radius:12px; padding:26px 16px 22px;text-decoration:none;transition:.25s ease;} .sl-cat:hover{border-color:var(--sl-teal);transform:translateY(-5px); box-shadow:0 12px 28px rgba(0,0,0,.08);} .sl-cat img{width:100%;max-width:120px;height:120px;object-fit:contain; margin-bottom:16px;transition:.25s ease;} .sl-cat:hover img{transform:scale(1.06);} .sl-cat .n{font-weight:700;font-size:14px;color:var(--sl-ink);line-height:1.35;} .sl-cat .c{font-size:12px;color:#a0a0a0;margin-top:6px;} /* ── Productos destacados (el shortcode del tema) ───────── */ body.home .woocommerce.columns-4{max-width:1180px;margin:0 auto 74px;padding:0 20px;} /* ── ¿Por qué? ──────────────────────────────────────────── */ .sl-why{display:grid;grid-template-columns:repeat(4,1fr);gap:30px; max-width:1180px;margin:0 auto;} .sl-why-item .i{width:54px;height:54px;border-radius:14px;background:var(--sl-teal-soft); display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .sl-why-item .i svg{width:26px;height:26px;stroke:var(--sl-teal);fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .sl-why-item h3{font-size:17px;font-weight:700;color:var(--sl-ink);margin:0 0 9px;} .sl-why-item p{font-size:14px;color:var(--sl-muted);line-height:1.65;margin:0;} /* ── CTA final ──────────────────────────────────────────── */ .sl-cta{background:linear-gradient(100deg,var(--sl-teal) 0%,#00c39b 100%); padding:78px 20px;text-align:center;} .sl-cta-inner{max-width:660px;margin:0 auto;} .sl-cta h2{color:#fff;font-size:34px;font-weight:800;margin:0 0 14px;letter-spacing:-.01em;} .sl-cta p{color:rgba(255,255,255,.92);font-size:16px;line-height:1.65;margin:0 0 28px;} .sl-cta-note{font-size:14px;margin:20px 0 0 !important;color:rgba(255,255,255,.9);} .sl-cta-note a{color:#fff;text-decoration:underline;font-weight:700;} /* ── Responsive ─────────────────────────────────────────── */ @media (max-width:1024px){ .sl-hero h1{font-size:40px;} .sl-cats .sl-cat{flex-basis:calc(33.333% - 12px);} .sl-why{grid-template-columns:repeat(2,1fr);gap:26px;} } @media (max-width:767px){ .sl-hero{padding:64px 18px 68px;} .sl-hero h1{font-size:31px;} .sl-hero-sub{font-size:16px;} .sl-hero-cta{flex-direction:column;} .sl-hero-cta .sl-btn{width:100%;} .sl-trust{grid-template-columns:repeat(2,1fr);} .sl-trust > div{border-bottom:1px solid var(--sl-line);} .sl-trust > div:nth-child(2n){border-right:0;} .sl-trust b{font-size:20px;} .sl-sec,.sl-why-wrap{padding:52px 18px;} .sl-sec-head{margin-bottom:32px;} .sl-sec-head h2,.sl-cta h2{font-size:26px;} .sl-cats{gap:12px;} .sl-cats .sl-cat{flex-basis:calc(50% - 6px);} .sl-cat{padding:20px 10px 16px;} .sl-cat img{max-width:88px;height:88px;margin-bottom:12px;} .sl-cat .n{font-size:13px;} .sl-cta{padding:56px 18px;} } @media (max-width:520px){ .sl-why{grid-template-columns:1fr;} } /* ── Fila superior del header (top-bar): está VACÍA y ocupa 40px ── Si algún día quieres usarla (teléfono, aviso, idiomas…), añádele elementos en WoodMart → Header Builder y BORRA esta regla. ⚠️ 2026-09-23: esta misma regla está DUPLICADA en línea en functions.php (`sl_estabilizar_primer_pintado`). Desde aquí llegaba tarde y la fila parpadeaba en cada carga empujando la cabecera. Si la borras, bórrala allí también. */ .whb-top-bar{display:none;} /* ── Sin franja en blanco entre el header y la portada ── La portada es a sangre completa: el hero tiene que pegarse al menú. */ body.home .whb-header{margin-bottom:0 !important;} body.home .wd-page-content, body.home .wd-content-layout, body.home .wd-content-area, body.home .entry-content{ padding-top:0 !important;margin-top:0 !important; padding-bottom:0 !important;margin-bottom:0 !important;} body.home .entry-content > *:first-child{margin-top:0 !important;} /* ── Cómo funciona (3 pasos) ── */ .sl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px; max-width:1080px;margin:0 auto;} .sl-step{position:relative;background:#fff;border:1px solid var(--sl-line); border-radius:12px;padding:34px 26px 28px;text-align:center;} .sl-step .num{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%;background:var(--sl-teal);color:#fff; font-weight:800;font-size:19px;margin-bottom:16px;} .sl-step h3{font-size:17px;font-weight:700;color:var(--sl-ink);margin:0 0 9px;} .sl-step p{font-size:14px;color:var(--sl-muted);line-height:1.65;margin:0;} @media (max-width:767px){ .sl-steps{grid-template-columns:1fr;gap:14px;} .sl-step{padding:24px 20px 20px;} } /* ── Páginas internas (Sobre nosotros / Contacto / legales) ── */ .sl-phero{background:radial-gradient(120% 160% at 20% 0%,#242424 0%,#111 100%); padding:64px 20px;text-align:center;} .sl-phero h1{color:#fff;font-size:38px;font-weight:800;margin:0 0 12px;letter-spacing:-.01em;} .sl-phero p{color:rgba(255,255,255,.72);font-size:16px;max-width:620px;margin:0 auto;line-height:1.65;} .sl-about{max-width:1080px;margin:0 auto;} .sl-about-txt{max-width:760px;margin:0 auto 36px;} .sl-about-txt p{font-size:16px;line-height:1.75;color:#3a3a3a;margin:0 0 16px;} .sl-mv{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .sl-mv-card{background:var(--sl-teal-soft);border-radius:12px;padding:28px 26px;} .sl-mv-card h2{font-size:20px;font-weight:800;color:var(--sl-ink);margin:0 0 10px;} .sl-mv-card p{font-size:15px;color:#3a5a52;line-height:1.65;margin:0;} .sl-feats{grid-template-columns:repeat(3,1fr);} .sl-faq{max-width:760px;margin:0 auto;} .sl-faq-item{border:1px solid var(--sl-line);border-radius:10px;padding:22px 24px;margin-bottom:14px;background:#fff;} .sl-faq-item h3{font-size:16px;font-weight:700;color:var(--sl-ink);margin:0 0 8px;} .sl-faq-item p{font-size:14.5px;color:var(--sl-muted);line-height:1.65;margin:0;} .sl-faq-item a{color:var(--sl-teal);font-weight:600;} .sl-contact{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1080px;margin:0 auto;} .sl-ccard{background:#fff;border:1px solid var(--sl-line);border-radius:12px;padding:26px 22px;text-align:center;} .sl-ccard h3{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sl-teal);margin:0 0 10px;} .sl-ccard p{font-size:15px;color:var(--sl-ink);line-height:1.6;margin:0;font-weight:600;} .sl-ccard p.sub{font-size:13px;color:var(--sl-muted);font-weight:400;margin-top:6px;} .sl-ccard a{color:var(--sl-ink);text-decoration:none;border-bottom:1px solid var(--sl-teal);} .sl-legal{max-width:820px;margin:0 auto;padding:10px 20px 50px;} .sl-legal h2{font-size:22px;margin:34px 0 12px;} .sl-legal h3{font-size:17px;margin:24px 0 10px;} .sl-legal p,.sl-legal li{font-size:15px;line-height:1.75;color:#3a3a3a;} .sl-legal table{width:100%;border-collapse:collapse;font-size:13.5px;overflow-x:auto;display:block;} .sl-legal td,.sl-legal th{border:1px solid var(--sl-line);padding:8px 10px;text-align:left;} /* 内页也通栏(带 .sl-phero 的页面) */ .page .wd-content-layout.container:has(.sl-phero){max-width:100%;padding-left:0;padding-right:0;} .page .entry-content:has(.sl-phero) > *{margin-top:0;margin-bottom:0;} /* ── Cookie Notice: layout limpio, botones con aire, × bien colocado ── */ #cookie-notice .cookie-notice-container{ position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 18px; max-width:1180px; margin:0 auto; padding:14px 58px 14px 22px; } #cn-notice-text{ margin:0; } #cn-notice-buttons{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } #cn-notice-buttons .cn-button{ margin:0 !important; } /* Botón cerrar × : centrado en el alto de la barra + glifo nítido (antes salía cuadro gris vacío) */ #cn-close-notice{ position:absolute !important; top:50% !important; right:14px !important; bottom:auto !important; left:auto !important; transform:translateY(-50%) !important; margin:0 !important; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; background:transparent !important; border:0 !important; opacity:.75; cursor:pointer; } #cn-close-notice::before{ content:"\2715"; color:#fff; font-size:20px; font-weight:700; line-height:1; } #cn-close-notice:hover{ opacity:1; } /* 2026-08-04 · el plugin fuerza `display:block` en TODO el rango <=900px, no solo en móvil. En tablet (768-900px) eso dejaba Aceptar y No pegados (solo el espacio en blanco del inline-block). Misma solución: subir especificidad, sin !important. La regla de <=767px viene DESPUÉS y por orden de fuente gana con `flex-direction:column`. */ @media (max-width:900px){ .cookie-notice-container #cn-notice-buttons{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; } } /* 2026-08-07 · La barra medía 291px en un móvil de 640 = 45% de la pantalla, y tapaba ENTEROS los dos botones del hero («Regístrate gratis» y «Ver catálogo»). La culpa era de apilar los tres botones en vertical (3×44 + huecos ≈ 160px). Ahora Aceptar y No van EN FILA repartiéndose el ancho, y «Política de privacidad» queda debajo como enlace compacto. El texto RGPD no se toca. */ @media (max-width:767px){ #cookie-notice .cookie-notice-container{ flex-direction:column; align-items:center; text-align:center; padding:12px 14px 14px; gap:10px; box-sizing:border-box; width:100%; max-width:100vw; } /* width:100% + break-word + centrado: envuelve dentro de la barra en cualquier móvil */ #cn-notice-text{ width:100%; box-sizing:border-box; padding:0 4px; overflow-wrap:break-word; text-align:center !important; font-size:12.5px !important; line-height:1.42; } /* 2026-08-04 · POR QUÉ LLEVA `.cookie-notice-container` DELANTE: el plugin trae `.cookie-notice-container #cn-notice-buttons{display:block}` dentro de @media(max-width:900px). Su especificidad (1,1,0) le gana a `#cn-notice-buttons` (1,0,0), así que aquí el contenedor volvía a `display:block` y `gap` NO se aplicaba (gap solo funciona en flex/grid). Con `margin:0 !important` en los botones el hueco real medido era 0px -> Aceptar y No salían pegados en móvil. Se sube la especificidad en vez de usar !important (más nativo, menos frágil). */ .cookie-notice-container #cn-notice-buttons{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:8px 12px; width:100%; max-width:340px; margin:0 auto; } #cn-notice-buttons .cn-button{ margin:0 !important; } /* flex:1 1 0 -> mismo ancho los dos; el gap de 12px es la separación que se pidió el 2026-08-05 (antes salían pegados). min-width evita que en 320px se estrujen: si no caben, wrap los baja y siguen siendo tocables. */ #cn-accept-cookie.cn-button, #cn-refuse-cookie.cn-button{ flex:1 1 0; min-width:118px; width:auto !important; } /* El enlace de la política ocupa su propia línea, pero como ENLACE (no pastilla de 44px): así no suma otra fila alta. Especificidad (3,1,0) a propósito, para ganarle a `#cookie-notice .cn-button{min-height:44px!important}`, que está más abajo en el fichero y si no volvería a estirarlo. */ #cn-notice-buttons #cn-more-info.cn-button{ flex:1 0 100%; width:auto !important; min-height:0 !important; padding:2px 8px !important; } #cn-close-notice{ top:12px !important; transform:none !important; right:12px !important; } } @media (max-width:1024px){ .sl-feats{grid-template-columns:repeat(2,1fr);} .sl-contact{grid-template-columns:repeat(2,1fr);} } @media (max-width:767px){ .sl-phero{padding:44px 18px;} .sl-phero h1{font-size:28px;} .sl-mv{grid-template-columns:1fr;} .sl-feats{grid-template-columns:1fr;} .sl-contact{grid-template-columns:1fr;} } /* ── CTA compacto (2026-07-11: pedido del dueño — nada de banda naranja gigante que choca con el botón naranja; tarjeta oscura, pequeña y fina) ── */ .sl-cta{background:transparent !important;padding:26px 16px 64px !important;} .sl-cta-inner{max-width:760px;margin:0 auto; background:radial-gradient(130% 170% at 18% 0%,#272727 0%,#131313 100%); border:1px solid rgba(0,171,135,.28);border-radius:16px; padding:40px 36px 34px;text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.16);} .sl-cta h2{font-size:24px !important;color:#fff;margin:0 0 8px !important;letter-spacing:-.01em;} .sl-cta p{font-size:14.5px !important;color:rgba(255,255,255,.7) !important; line-height:1.6;margin:0 auto 20px !important;max-width:520px;} .sl-cta .sl-btn{padding:12px 26px;font-size:14px;} .sl-cta .sl-btn-primary{box-shadow:0 6px 18px rgba(245,154,87,.3);} .sl-cta .sl-btn-primary:hover{box-shadow:0 10px 24px rgba(245,154,87,.42);} .sl-cta-note{font-size:12.5px !important;margin:14px 0 0 !important;color:rgba(255,255,255,.55) !important;} .sl-cta-note a{color:#3fd3b0 !important;} @media (max-width:767px){ .sl-cta{padding:18px 14px 48px !important;} .sl-cta-inner{padding:30px 20px 26px;border-radius:14px;} .sl-cta h2{font-size:20px !important;} .sl-cta p{font-size:13.5px !important;} .sl-cta .sl-btn{width:100%;padding:13px 20px;} } /* ── Pulido QA 2026-07-11: táctil ≥44px, fuentes ≥12px, registro móvil ── */ /* 心愿单/对比等商品卡小图标:触控区补足 */ .wd-buttons .wd-action-btn > a{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;} /* 商品卡 Regístrese 按钮与分类小链接(手机) */ @media (max-width:1024px){ .wd-product a.button{min-height:44px;display:inline-flex;align-items:center;} .wd-product .wd-product-cats a{padding:5px 0;display:inline-block;} } /* Cookie 条按钮触控 */ #cookie-notice .cn-button{min-height:44px !important;padding:10px 18px !important;} /* 字号下限 12px */ .wd-product small,.price small,.woocommerce-price-suffix{font-size:12px !important;} .wd-label.out-of-stock,.wd-product .out-of-stock{font-size:12px !important;} .wd-toolbar .wd-toolbar-label{font-size:12px !important;} /* 页脚链接触控 */ .wd-footer .menu li a,.footer-container li a{padding:6px 0;display:inline-block;} /* 手机版权栏:支付徽章整体居中 */ @media (max-width:767px){ .copyrights-wrapper .container{flex-direction:column;gap:10px;align-items:center;text-align:center;} .copyrights-wrapper .container > div{justify-content:center !important;display:flex;flex-wrap:wrap;align-items:center;} } /* /tienda/ 分类圆卡计数:与图标打架 → 加底衬 */ .wd-cat .wd-cat-number,.wd-cat mark{background:rgba(17,17,17,.62);color:#fff !important;border-radius:20px;padding:2px 10px;text-shadow:none;} /* 注册表单(UM)手机可用性 */ .um input[type=text],.um input[type=password],.um input[type=tel], .um input[type=email],.um input[type=number],.um select,.um textarea{font-size:16px !important;} .um .select2-selection--single{height:auto !important;min-height:42px;} .um .select2-selection__rendered,.um .select2-selection__placeholder{white-space:normal !important;line-height:1.45 !important;padding-top:7px;padding-bottom:7px;font-size:13.5px;} @media (max-width:767px){ .um .um-tip{display:none;} } /* ── 2026-08-10 · Contraste de los textos de ayuda del alta ────────────────── Sólo se ven en MÓVIL, y por eso ninguna auditoría de escritorio los pilló: a 1440 px `.um-tip-text` es un tooltip y no se pinta como texto; la regla de la línea de arriba (`.um .um-tip{display:none}`) hace que a <=767 px UM lo pinte en línea. Medido con Chrome a 390 px sobre el DOM ya pintado: .um-tip-text rgb(153,153,153) sobre blanco = 2,85:1 (13 px) .um-field-checkbox-option rgb(136,136,136) = 3,54:1 (15 px) Los dos por debajo del 4,5:1 de WCAG, y son justo «Ejemplo: 600123456», «NIF, CIF» y la frase de aceptación de la política de privacidad. #595959 = 7,0:1 y #4a4a4a = 8,2:1 sobre blanco. Se cambia SÓLO el color: ni tamaños ni anchos ni nowrap, así que no puede romper nada en pantalla estrecha. Lleva !important porque el CSS de UM también lo lleva en checkbox/radio. */ .um .um-tip-text, .um-tip-text{color:#595959 !important;} .um .um-field-checkbox-option, .um .um-field-radio-option, .um-field-checkbox-option, .um-field-radio-option{color:#4a4a4a !important;} /* 2026-08-10 · «Mostrar la política de privacidad» abría un panel VACÍO (`_um_register_use_gdpr_content_id` valía 0). Ya no: el panel lleva un texto breve con enlace real — ver sl_resumen_politica_gdpr en functions.php. No se incrusta la política entera (20 KB de bloques en cada carga del registro). */ .um a.um-toggle-gdpr{padding:8px 0;display:inline-block;} /* UM(登录/注册)蓝按钮 → 行动橙 */ /* 2026-08-10: mismo motivo que .sl-btn-primary — el blanco del plugin sobre el naranja daba 2,18:1. Se fija aquí el color del texto (antes lo ponía UM). */ .um .um-button,.um input[type=submit].um-button{background:var(--sl-orange) !important;border-color:var(--sl-orange) !important;color:var(--sl-ink) !important;} .um .um-button:hover,.um input[type=submit].um-button:hover{background:var(--sl-orange-d) !important;border-color:var(--sl-orange-d) !important;color:var(--sl-ink) !important;} .um a.um-link,.um .um-field-checkbox.active i{color:var(--sl-teal);} /* 404 页大空白收紧 */ .error404 .wd-page-content{min-height:auto !important;} .error404 .page-content{padding-bottom:40px;} /* ── Hero deslizante (2026-07-11, pedido del dueño: slider tipo demo, texto con animación de entrada; JS vainilla 1.5KB, sin plugins) ── */ .sl-slider{padding:0;position:relative;overflow:hidden;} .sl-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s; padding:88px 20px 96px; background:radial-gradient(120% 130% at 15% 0%,#2c2c2c 0%,#161616 55%,#0f0f0f 100%);} .sl-slide.is-active{opacity:1;visibility:visible;position:relative;} .sl-slide:after{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(0,171,135,.20) 0%,transparent 70%);} .sl-slide[data-glow="orange"]:after{background:radial-gradient(circle,rgba(245,154,87,.20) 0%,transparent 70%);} .sl-hero .sl-h1{color:#fff;font-size:52px;line-height:1.12;font-weight:800;margin:0 0 22px;letter-spacing:-.02em;} /* 文字错落滑入 */ .sl-slide .sl-badge,.sl-slide h1,.sl-slide .sl-h1,.sl-slide .sl-hero-sub, .sl-slide .sl-hero-cta,.sl-slide .sl-hero-note{opacity:0;transform:translateY(28px); transition:opacity .65s ease,transform .65s ease;} .sl-slide.is-active .sl-badge{opacity:1;transform:none;transition-delay:.15s;} .sl-slide.is-active h1,.sl-slide.is-active .sl-h1{opacity:1;transform:none;transition-delay:.28s;} .sl-slide.is-active .sl-hero-sub{opacity:1;transform:none;transition-delay:.42s;} .sl-slide.is-active .sl-hero-cta{opacity:1;transform:none;transition-delay:.56s;} .sl-slide.is-active .sl-hero-note{opacity:1;transform:none;transition-delay:.7s;} @media (prefers-reduced-motion: reduce){ .sl-slide *{transition:none !important;transform:none !important;opacity:1 !important;} } /* 箭头与圆点 */ .sl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06);color:#fff;font-size:26px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:.2s;} .sl-nav:hover{background:var(--sl-teal);border-color:var(--sl-teal);} .sl-prev{left:22px;} .sl-next{right:22px;} /* 圆点:全部属性锁死,防主题全局 button 样式(min-height/padding)把它撑变形 */ .sl-dots{position:absolute;left:0;right:0;bottom:22px;display:flex;gap:10px;justify-content:center;align-items:center;z-index:3;} .sl-dots button{appearance:none;-webkit-appearance:none;box-sizing:border-box; width:8px !important;height:8px !important;min-width:8px !important;min-height:8px !important; max-width:8px;max-height:8px;padding:0 !important;margin:0 !important;border:0 !important; border-radius:50% !important;line-height:0;font-size:0;box-shadow:none !important; background:rgba(255,255,255,.35) !important;cursor:pointer; transition:background .25s ease,transform .25s ease;} .sl-dots button:hover{background:rgba(255,255,255,.65) !important;} .sl-dots button.on{background:var(--sl-teal) !important;transform:scale(1.5);} @media (max-width:767px){ .sl-slide{padding:38px 18px 44px;} .sl-hero .sl-h1{font-size:31px;} .sl-nav{display:none;} /* 手机用手势滑动 */ } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-08-07 · El hero medía 692px de alto en un móvil de 360×640: los dos * botones caían en y=538–646, o sea que «Ver catálogo» YA se salía de pantalla * aun sin barra de cookies, y la barra (195px, apoyada sobre la barra inferior * de 55px) tapaba los dos. Se recorta el aire vertical del hero. * Los textos no cambian; solo márgenes y, en pantallas cortas, la disposición. * ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:767px){ .sl-badge{margin-bottom:15px;} .sl-slide h1,.sl-hero .sl-h1{margin:0 0 13px;} .sl-hero-sub{margin-bottom:20px;} .sl-hero-cta{margin-bottom:14px;} } @media (max-width:767px) and (max-height:740px){ /* Móviles «cortos» (360×640, 375×667, plegables cerrados…). Los CTA en fila ahorran ~60px. flex:1 + gap:10 mantiene el área táctil ≥44px y evita que salgan pegados; si no caben, flex-wrap los baja y siguen a ancho completo. */ .sl-hero-cta{flex-direction:row;gap:10px;} .sl-hero-cta .sl-btn{flex:1 1 0;min-width:130px;width:auto;padding-left:10px;padding-right:10px;} .sl-hero-sub{font-size:15px;line-height:1.5;margin-bottom:16px;} .sl-slide{padding:30px 16px 34px;} } @media (max-width:767px) and (max-height:670px){ /* Pantallas MUY cortas (360×640 y menores). Presupuesto real medido ahí: 640 − 50 cabecera − 55 barra inferior − 195 barra de cookies = 340px para todo el hero. Se aprieta un punto más y se esconde la nota auxiliar (su contenido se repite en la franja de confianza que va justo debajo). */ .sl-badge{margin-bottom:8px;font-size:11px;padding:5px 12px;} .sl-slide h1,.sl-hero .sl-h1{font-size:27px;margin:0 0 8px;} .sl-hero-sub{font-size:14px;line-height:1.45;margin-bottom:10px;} .sl-hero-note{display:none;} .sl-hero-cta{margin-bottom:0;} .sl-hero-cta .sl-btn{font-size:14px;padding-top:12px;padding-bottom:12px;} /* El padding inferior NO es aire decorativo: .sl-dots es position:absolute con bottom:22px, así que si se recorta por debajo de eso los puntos del carrusel se montan encima de los botones (pasó al bajarlo a 18px). Como .sl-slide centra su contenido, subir el padding inferior además empuja el bloque hacia arriba, que es justo lo que interesa aquí. */ .sl-slide{padding:12px 16px 34px;} .sl-dots{bottom:8px;} } /* La barra de cookies también se aprieta en pantallas estrechas: cada línea de texto que se ahorra son ~18px menos tapando el hero. */ @media (max-width:400px){ #cookie-notice .cookie-notice-container{padding:10px 12px 12px;gap:8px;} #cn-notice-text{font-size:12px !important;line-height:1.38;} } @media (max-width:767px){ .sl-cats .sl-cat:nth-child(3n+1):last-child{grid-column:auto;} .sl-cats .sl-cat:nth-child(2n+1):last-child{grid-column:1 / -1;max-width:60%;margin:0 auto;width:100%;} } /* ── Fondo con textura de grano beige (recuperado del demo furniture2; pedido del dueño 2026-07-11). El fichero nunca se borró: /wp-content/uploads/2024/07/wd-furniture-background.jpg (128px, tileable) ── */ .wd-page-content{background:#f5f4f0 url('/wp-content/uploads/2024/07/wd-furniture-background.jpg') repeat !important;} /* Las franjas gris-plano taparían la textura: se vuelven transparentes, las tarjetas blancas hacen el contraste */ .sl-sec-alt,.sl-why-wrap{background:transparent;} .sl-trust{background:rgba(255,255,255,.72);backdrop-filter:blur(2px);} /* ── Separación entre la cabecera y el contenido. 2026-07-14 ─────────── HISTORIA (y mi resto sin recoger): El 07-11 quité el padding-top de arriba porque las páginas llevaban un hero OSCURO a sangre (.sl-phero) y la franja beige entre el menú y el hero quedaba fea. Luego, el 07-13, el dueño me pidió quitar esos heros de todas las páginas menos la home -> los escondí (línea `body:not(.home) .sl-phero{display:none}`) PERO DEJÉ PUESTA la regla que mataba el padding. Resultado: el hero ya no está, y el contenido se queda pegado a la cabecera. Eso es lo que veía el dueño en «Sobre nosotros» / «Contacto», mientras que /blog/ (que nunca tuvo hero) sí respiraba. AHORA: todas las páginas MENOS la home llevan su franja de separación. La home sigue a cero, porque su slider va a sangre pegado al menú (eso es a propósito). Sin `:has()`: el minificador de WP Fastest Cache se come esos selectores. ── */ body:not(.home) .wd-content-layout{padding-top:40px !important;} @media (max-width:767px){ body:not(.home) .wd-content-layout{padding-top:24px !important;} } /* ── toolbar tienda v2(对准真实DOM):Mostrar 一行排开,视图切换横排, 砍掉 5列/6列 视图(几乎无人用,是图标堆山的元凶) ── */ .wd-shop-prod-per-page .wd-products-per-page{display:inline-flex;flex-wrap:nowrap; align-items:center;white-space:nowrap;gap:2px;} .wd-products-shop-view{display:inline-flex !important;flex-direction:row !important; align-items:center;gap:10px;} /* 工具栏容器整体一行(直接点名布局#829的哈希容器,:has()兜底) */ .wp-block-wd-container.wd-ba878234, .wp-block-wd-container.wd-8299cb7f, .wp-block-wd-container.wd-dir-col:has(.wd-products-per-page), .wp-block-wd-container.wd-dir-col:has(.wd-shop-view){ flex-direction:row !important;align-items:center !important; gap:14px;flex-wrap:nowrap !important;justify-content:flex-end;} .wd-shop-view,.wd-shop-prod-per-page{display:inline-flex !important;align-items:center;} /* UM(登录/注册)蓝按钮 → 行动橙(从被清块中保留) */ .um .um-button,.um input[type=submit].um-button{background:var(--sl-orange) !important;border-color:var(--sl-orange) !important;color:var(--sl-ink) !important;} .um .um-button:hover{background:var(--sl-orange-d) !important;border-color:var(--sl-orange-d) !important;color:var(--sl-ink) !important;} .um a.um-link{color:var(--sl-teal);} .error404 .wd-page-content{min-height:auto !important;} /* per-page 容器宽度自适应,别让排序框压住 24/48 */ .wp-block-wd-container.wd-ba878234,.wp-block-wd-container.wd-8299cb7f{width:auto !important;min-width:max-content !important;flex:0 0 auto !important;} /* ── sidebar de tienda fuera(店主:侧栏没用,产品区占满全宽)── 侧栏是布局#829里的 off-sidebar 块(含隐形的白字 Precios mayoristas cover); 连块隐藏,产品容器撑满。想恢复:删掉这三行即可 ── */ .wd-content-layout.wd-builder-on .wp-block-wd-off-sidebar{display:none !important;} .wd-content-layout.wd-builder-on .wd-content-area{width:100% !important;max-width:100% !important;flex:1 1 100% !important;} /* ── Mini-carrito: desglose de costes ── */ .sl-mc-rows{display:block;width:100%;} .sl-mc-row{display:flex;justify-content:space-between;align-items:center; font-size:13.5px;color:#555;padding:3px 0;font-weight:400;} .sl-mc-row .woocommerce-Price-amount{font-weight:600;color:#333;} .sl-mc-total{border-top:1px solid #e5e5e5;margin-top:6px;padding-top:8px; font-size:15px;font-weight:700;color:#111;} .sl-mc-total .woocommerce-Price-amount{color:var(--sl-orange);font-weight:800;} .sl-mc-free{color:var(--sl-teal);letter-spacing:.03em;} .sl-mc-badge{display:block;font-size:12px;color:#777;background:var(--sl-teal-soft); border-radius:6px;padding:5px 10px;margin-bottom:8px;text-align:center;} .sl-mc-badge strong{color:var(--sl-teal-d);} /* ── tienda móvil: herramientas móviles fuera(店主:排版乱+侧栏已删)── 手机端隐藏:视图切换点阵(一行几个,没用)、Show sidebar 按钮、 底部工具栏的筛选图标(都指向已删除的空侧栏) ── */ @media (max-width:1024px){ .wd-shop-view,.wd-products-shop-view{display:none !important;} .wp-block-wd-off-canvas-button{display:none !important;} .wd-toolbar .wd-toolbar-sidebar{display:none !important;} } .sl-line-total .woocommerce-Price-amount{color:#111;font-weight:700;} /* ── Carrito: badges de pago reales ── */ .sl-pagos{display:flex;gap:8px;flex-wrap:wrap;} .sl-pagos span{display:inline-flex;align-items:center;height:26px;padding:0 12px; border-radius:5px;font-size:12px;font-weight:800;letter-spacing:.02em;} .sl-pagos .v{background:#1a1f71;color:#fff;font-style:italic;} .sl-pagos .m{background:#000;color:#eb001b;font-size:16px;letter-spacing:-3px;} .sl-pagos .b{background:#00c2c7;color:#fff;text-transform:lowercase;} .sl-pagos .t{background:#f0f0f0;color:#333;border:1px solid #ddd;font-weight:600;} /* ── Carrito/checkout: opciones de envío grandes y legibles ── */ #shipping_method li,.woocommerce-shipping-methods li, .wc-block-components-radio-control__option{ display:flex;align-items:center;gap:10px; font-size:16px !important;line-height:1.5; padding:12px 14px !important;margin-bottom:8px; border:1px solid var(--sl-line);border-radius:10px; background:#fff;transition:.2s;cursor:pointer;} #shipping_method li:hover,.woocommerce-shipping-methods li:hover{ border-color:var(--sl-teal);background:var(--sl-teal-soft);} #shipping_method li label,.woocommerce-shipping-methods li label{ font-size:16px !important;font-weight:600;color:var(--sl-ink); cursor:pointer;flex:1;margin:0;} #shipping_method li input[type=radio]{width:20px;height:20px;accent-color:var(--sl-teal);flex:0 0 auto;} #shipping_method li .amount,.woocommerce-shipping-methods .amount{ font-size:16px !important;font-weight:800;color:var(--sl-orange);} #shipping_method li .woocommerce-Price-taxLabel{font-size:12px;font-weight:400;color:#888;} @media (max-width:767px){ #shipping_method li,.woocommerce-shipping-methods li{font-size:15px !important;padding:14px 12px !important;} } /* ── carrito: respiro bajo el header(内页归零间距时把购物车也归零了,补回来)── */ .woocommerce-cart .wd-content-layout.wd-builder-on{padding-top:40px !important;} .woocommerce-checkout .wd-content-layout.wd-builder-on{padding-top:40px !important;} /* Opciones de envío: la etiqueta manda, el radio no se encoge */ .cart_totals #shipping_method li{align-items:flex-start;} .cart_totals #shipping_method li label{line-height:1.45;} /* ── Checkout StockLider: tarjetas, colores de marca, resumen ── */ /* Barra de confianza (inyectada en el layout #848) */ .sl-co-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px; max-width:1200px;margin:0 auto 26px;padding:0 4px;} .sl-co-trust .i{display:flex;align-items:center;gap:10px;background:#fff; border:1px solid var(--sl-line);border-radius:10px;padding:12px 14px;} .sl-co-trust .e{font-size:22px;line-height:1;flex:0 0 auto;} .sl-co-trust b{display:block;font-size:13.5px;color:var(--sl-ink);font-weight:700;line-height:1.3;} .sl-co-trust small{font-size:11.5px;color:var(--sl-muted);} /* Pasos del checkout en tarjeta */ .wc-block-checkout__main .wc-block-components-checkout-step{ background:#fff;border:1px solid #ece3d2;border-radius:16px; box-shadow:0 6px 24px rgba(61,49,35,.06); padding:22px 24px !important;margin-bottom:18px;} .wc-block-checkout__sidebar .wc-block-components-sidebar{ background:#fff;border:1px solid #ece3d2;border-radius:16px; box-shadow:0 6px 24px rgba(61,49,35,.06);padding:20px 22px;} .wc-block-components-checkout-step__title{font-size:17px !important;font-weight:700;color:var(--sl-ink);} .wc-block-components-checkout-step__heading-content{color:var(--sl-teal);} /* Botón Finalizar = naranja acción */ .wc-block-components-checkout-place-order-button, .wc-block-checkout__actions button{background:var(--sl-orange) !important; border-radius:10px !important;font-weight:800 !important;font-size:16px !important; min-height:52px !important;} .wc-block-components-checkout-place-order-button:hover{background:var(--sl-orange-d) !important;} /* Opciones de envío/pago = tarjeta con hover verde (radios) */ .wc-block-components-radio-control__option{border:1px solid var(--sl-line) !important; border-radius:10px !important;padding:14px 16px !important;margin-bottom:8px !important; font-size:15px !important;} .wc-block-components-radio-control__option:hover{border-color:var(--sl-teal) !important;background:var(--sl-teal-soft) !important;} .wc-block-components-radio-control__option--checked{border-color:var(--sl-teal) !important;background:var(--sl-teal-soft) !important;} input[type=radio].wc-block-components-radio-control__input{accent-color:var(--sl-teal);} /* Resumen del pedido (columna derecha) */ .wc-block-components-sidebar .wc-block-components-totals-item{font-size:14px;padding:7px 0;} .wc-block-components-totals-footer-item{font-size:17px !important;font-weight:800; border-top:1px solid var(--sl-line);padding-top:12px !important;} .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:var(--sl-orange) !important;} .wc-block-components-order-summary{border-radius:12px;} /* Free shipping badge verde */ .wc-block-components-totals-shipping .wc-block-components-totals-item__value:only-child{color:var(--sl-teal);} @media (max-width:1024px){ .sl-co-trust{grid-template-columns:repeat(2,1fr);} } @media (max-width:767px){ .sl-co-trust{grid-template-columns:1fr;gap:8px;margin-bottom:18px;} .wc-block-checkout__main .wc-block-components-checkout-step{padding:16px 16px !important;} .wc-block-components-checkout-step__title{font-size:15px !important;} } /* ── Títulos de paso del checkout legibles (número claro + barra nítida) ── */ /* Cabecera de paso: sin recuadro propio (la tarjeta la da .sl-co-card). Se conserva el círculo verde del número; se QUITA la barra verde de la izquierda. */ .woocommerce-checkout .wp-block-wd-title.title, .woocommerce-checkout .wp-block-wd-title.title.wd-design-with-image{ display:flex !important;align-items:center;gap:14px; font-size:20px !important;font-weight:800;color:var(--sl-ink) !important; background:transparent !important;box-shadow:none !important; border:0 !important;border-radius:0 !important;padding:10px 0 16px !important;margin:0 !important; border-bottom:1px solid #f0e9db !important;min-height:0 !important;} /* por si el fondo gris viniera de un wrapper interno del título */ .sl-co-card .wp-block-wd-title > span:not(.wd-text-icon){background:transparent !important;} /* Cada PASO se envuelve por JS en .sl-co-card = UNA tarjeta limpia, MISMO estilo que el resto de páginas (blanco, borde #ece3d2, radius 16, sombra suave). */ .sl-co-card{background:#fff;border:1px solid #ece3d2;border-radius:16px; box-shadow:0 6px 24px rgba(61,49,35,.06);padding:12px 26px 24px;margin:22px 0;} .sl-co-card .wd-billing-details,.sl-co-card .wd-shipping-details, .sl-co-card .wd-order-table,.sl-co-card .wd-payment-methods{ background:transparent !important;border:0 !important;border-radius:0 !important; box-shadow:none !important;padding:0 !important;margin:0 !important;} @media (max-width:767px){ .sl-co-card{padding:8px 16px 18px;} } /* El número: círculo verde relleno + número blanco grande */ .woocommerce-checkout .wp-block-wd-title .wp-block-wd-icon, .woocommerce-checkout .wp-block-wd-title .wd-with-text{ flex:0 0 34px !important;width:34px !important;height:34px !important; min-width:34px !important;max-width:34px !important;min-height:34px !important;aspect-ratio:1/1; padding:0 !important;box-sizing:border-box !important;border-radius:50% !important;line-height:1 !important; background:var(--sl-teal) !important;display:flex !important;align-items:center;justify-content:center;overflow:visible;} .woocommerce-checkout .wp-block-wd-title .wd-text-icon{ color:#fff !important;font-size:14px !important;font-weight:800 !important;line-height:1 !important; display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;} @media (max-width:767px){ .woocommerce-checkout .wp-block-wd-title.title{font-size:16px !important;padding:13px 15px !important;gap:10px;} .woocommerce-checkout .wp-block-wd-title .wp-block-wd-icon, .woocommerce-checkout .wp-block-wd-title .wd-with-text{ flex:0 0 28px !important;width:28px !important;height:28px !important; min-width:28px !important;max-width:28px !important;min-height:28px !important;} .woocommerce-checkout .wp-block-wd-title .wd-text-icon{font-size:13px !important;} } /* ── Cápsula del carrito: el número de artículos en VERDE de marca (antes naranja pálido, ilegible) ── */ .wd-cart-number, .wd-header-cart .wd-cart-number, .whb-header .wd-cart-number.wd-tools-count{ background:var(--sl-teal) !important;color:#fff !important;border-color:var(--sl-teal) !important; } /* ── Footer StockLider (rediseño 2026-07-12: tarjetas por sección, enlaces con color e interacción, animaciones suaves, responsive a cualquier móvil) ── */ .sl-foot{max-width:1200px;margin:0 auto;padding:52px 20px 30px;} .sl-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.3fr;gap:22px;} .sl-foot-col{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06); border-radius:14px;padding:24px 22px;transition:border-color .3s ease,background .3s ease;} .sl-foot-col:hover{border-color:rgba(0,171,135,.35);background:rgba(255,255,255,.04);} /* Encabezados con barrita de acento verde */ .sl-foot-h{font-size:15px !important;font-weight:800;color:#fff !important;margin:0 0 18px !important; padding-bottom:10px;position:relative;letter-spacing:.02em;} .sl-foot-h:after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px; background:var(--sl-teal,#00ab87);border-radius:3px;transition:width .35s cubic-bezier(.4,0,.2,1);} .sl-foot-col:hover .sl-foot-h:after{width:56px;} .sl-foot-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em;} .sl-foot-logo span{color:var(--sl-teal,#00ab87);} .sl-foot-tag{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.6);margin:0 0 18px;} .sl-foot-card{font-style:normal;display:flex;flex-direction:column;gap:3px; background:rgba(0,171,135,.08);border-left:3px solid var(--sl-teal,#00ab87); border-radius:8px;padding:12px 14px;font-size:12.5px;color:rgba(255,255,255,.72);} .sl-foot-card strong{color:#fff;font-size:13px;} /* Enlaces: color propio + deslizamiento + flecha al hover */ .sl-foot-links{list-style:none;margin:0;padding:0;} .sl-foot-links li{margin:0 0 3px;} .sl-foot-links a{display:inline-flex;align-items:center;gap:6px; font-size:13.5px;color:rgba(255,255,255,.62);text-decoration:none; padding:6px 0;transition:color .25s ease,transform .25s ease;position:relative;} .sl-foot-links a:before{content:"›";color:var(--sl-teal,#00ab87);font-weight:700; opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease;} .sl-foot-links a:hover{color:var(--sl-teal,#3fd3b0);transform:translateX(4px);} .sl-foot-links a:hover:before{opacity:1;transform:translateX(0);} /* Contacto con iconos */ .sl-foot-contact{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:14px;} .sl-foot-contact li{display:flex;align-items:center;gap:11px;} .sl-foot-ico{flex:0 0 auto;width:36px;height:36px;border-radius:50%; background:rgba(0,171,135,.14);display:flex;align-items:center;justify-content:center;font-size:16px;} .sl-foot-contact div{display:flex;flex-direction:column;line-height:1.4;} .sl-foot-contact b{font-size:12px;color:rgba(255,255,255,.5);font-weight:600;text-transform:uppercase;letter-spacing:.04em;} .sl-foot-contact span{font-size:13.5px;color:rgba(255,255,255,.82);} .sl-foot-contact a{font-size:13.5px;color:var(--sl-teal,#3fd3b0);text-decoration:none;transition:color .2s;} .sl-foot-contact a:hover{color:#fff;text-decoration:underline;} .sl-foot-badge{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.82); background:linear-gradient(100deg,rgba(0,171,135,.16),rgba(0,171,135,.04)); border:1px solid rgba(0,171,135,.28);border-radius:10px;padding:11px 14px;} .sl-foot-badge b{color:#fff;} /* Responsive: 4 → 2 → 1 columnas, cualquier móvil */ @media (max-width:1024px){ .sl-foot-grid{grid-template-columns:1fr 1fr;} } @media (max-width:600px){ .sl-foot{padding:36px 16px 20px;} .sl-foot-grid{grid-template-columns:1fr;gap:14px;} .sl-foot-col{padding:20px 18px;} .sl-foot-links a{padding:9px 0;} /* táctil ≥44px en móvil */ } /* ═══════════════ SL · Descripción en cajón desplegable + vídeo abajo ═══════════════ */ .sl-desc{ margin:18px 0; } .sl-desc-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; padding:14px 18px; cursor:pointer; text-align:left; font-weight:700; font-size:16px; color:#fff; background:var(--btn-accented-bgcolor,#f59a57); border:1px solid var(--btn-accented-bgcolor,#f59a57); border-left:4px solid var(--btn-accented-bgcolor-hover,#df8c4f); border-radius:12px; -webkit-appearance:none; appearance:none; transition:background .2s ease; } .sl-desc-toggle:hover{ background:var(--btn-accented-bgcolor-hover,#df8c4f); } .sl-desc-chevron{ flex:0 0 auto; width:11px; height:11px; margin-right:4px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); transition:transform .35s cubic-bezier(.4,0,.2,1); } .sl-desc.is-open .sl-desc-chevron{ transform:rotate(-135deg); } .sl-desc-panel{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1); } .sl-desc-inner{ margin-top:10px; padding:18px 20px; line-height:1.7; color:#334155; background:rgba(245,154,87,.10); border:1px solid rgba(245,154,87,.22); border-radius:12px; } .sl-desc-inner > :first-child{ margin-top:0; } .sl-desc-inner > :last-child{ margin-bottom:0; } .sl-desc-video{ margin-top:16px; } .sl-desc-video p{ margin:0; } .sl-desc-video iframe{ width:100% !important; height:auto !important; aspect-ratio:16/9; border:0; border-radius:12px; display:block; } @media (max-width:600px){ .sl-desc-toggle{ padding:12px 14px; font-size:15px; } .sl-desc-inner{ padding:14px 15px; } } /* Móvil: ocultar la miga de pan (pedido del dueño: no aporta y el header la tapaba) */ @media (max-width:1024px){ .single-product .wd-el-breadcrumbs{ display:none !important; } } .sl-foot-social{display:flex;gap:10px;margin-top:18px} .sl-foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(0,171,135,.10);color:#00ab87;transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease} .sl-foot-social a:hover,.sl-foot-social a:focus-visible{background:#00ab87;color:#fff;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,171,135,.32)} .sl-foot-social svg{display:block;width:19px;height:19px} /* ─── Menú móvil: redes sociales ─── */ .sl-mob-social{display:flex;gap:14px;justify-content:center;padding:16px 16px 22px;margin-top:0} .sl-mob-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(0,171,135,.10);color:#00ab87;transition:transform .2s ease,background .2s ease,color .2s ease} .sl-mob-social a:hover,.sl-mob-social a:focus-visible{background:#00ab87;color:#fff;transform:translateY(-2px)} .sl-mob-social svg{display:block} /* ── Ocultar la fila del cupón TSTEDCHW en el resumen (mostraba "-0,00 €" engañoso; el descuento real se aplica como línea de Fee "Descuento cupón TSTEDCHW -165,09"). Solo oculta ESE cupón; otros cupones con descuento real siguen mostrándose. 2026-07-13 ── */ tr.cart-discount.coupon-tstedchw, .cart_totals tr.cart-discount.coupon-tstedchw, .woocommerce-checkout-review-order-table tr.cart-discount.coupon-tstedchw, .woocommerce-checkout tr.cart-discount.coupon-tstedchw{ display:none !important; } /* ═══════════════════════════════════════════════════════════ HERO — imagen de marca como fondo del slider (2026-07-13, pedido del dueño) Imagen 1600x805 (cajas StockLider + globo + transpaleta) sustituye el degradado oscuro. Se conservan las 3 diapositivas + animación + flechas + puntos. Texto en OSCURO + velo blanco suave para legibilidad. Alcance por #sl-slider (id) para NO tocar ningún otro .sl-hero. Rollback: borrar este bloque y el fichero img/banner-b2b.jpg =══════════════════════════════════════════════════════════ */ #sl-slider{ background: radial-gradient(ellipse 72% 80% at 50% 52%, rgba(255,255,255,.76) 0%, rgba(255,255,255,.40) 46%, rgba(255,255,255,0) 78%), #efece6 url('/wp-content/themes/woodmart-child/img/banner-b2b.jpg') center center / cover no-repeat; } /* las diapositivas dejan de pintar su degradado oscuro (se ve el fondo del slider) */ #sl-slider .sl-slide{background:transparent;} #sl-slider .sl-slide:after{display:none;} /* quita el halo teal/naranja: choca con la imagen */ /* texto a color oscuro con leve halo blanco para despegarlo de la imagen */ #sl-slider h1,#sl-slider .sl-h1{color:var(--sl-ink);text-shadow:0 1px 3px rgba(255,255,255,.65);} #sl-slider .sl-hero-sub{color:#3a3a3a;} #sl-slider .sl-hero-note{color:rgba(0,0,0,.52);} #sl-slider .sl-badge{background:rgba(0,171,135,.14);border-color:rgba(0,171,135,.5);color:var(--sl-teal-d);} /* botón secundario "ghost" en oscuro sobre fondo claro */ #sl-slider .sl-btn-ghost{color:var(--sl-ink);border-color:rgba(0,0,0,.28);background:rgba(255,255,255,.6);} #sl-slider .sl-btn-ghost:hover{background:var(--sl-ink);color:#fff;border-color:var(--sl-ink);} /* flechas y puntos oscuros (los blancos no se ven sobre imagen clara) */ #sl-slider .sl-nav{color:var(--sl-ink);border-color:rgba(0,0,0,.18);background:rgba(255,255,255,.62);} #sl-slider .sl-nav:hover{background:var(--sl-teal);border-color:var(--sl-teal);color:#fff;} #sl-slider .sl-dots button{background:rgba(0,0,0,.28) !important;} #sl-slider .sl-dots button:hover{background:rgba(0,0,0,.5) !important;} #sl-slider .sl-dots button.on{background:var(--sl-teal) !important;transform:scale(1.5);} /* móvil: la imagen es apaisada (2:1); en pantalla estrecha se recorta al centro. Reforzamos el velo para que el texto siga legible. */ @media (max-width:767px){ #sl-slider{ background: linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)), #efece6 url('/wp-content/themes/woodmart-child/img/banner-b2b.jpg') center center / cover no-repeat; } } /* ── Cookie Notice — jerarquía de botones (2026-07-13, el móvil tenía 3 píldoras verdes idénticas). Aceptar=sólido / No=contorno / Política=enlace / × oculto (hay Aceptar/No explícitos → sin aceptar implícito, mejor RGPD). Además unifica al verde de marca #00ab87 (antes #00a99d del plugin). ── */ #cookie-notice #cn-notice-buttons .cn-button{ border-radius:9px !important;padding:11px 20px !important; font-size:14px !important;font-weight:600 !important;letter-spacing:0 !important; box-shadow:none !important;transition:background-color .2s ease,border-color .2s ease;} /* 2026-08-10 · CONTRASTE. Medido hoy con Chrome a 390 px sobre el DOM pintado: #cn-accept-cookie tenía fondo rgb(0,171,135) (= --sl-teal, el verde de marca) con texto blanco -> 2,93:1, por debajo del 4,5:1 que pide WCAG. 2,93 es el techo de ese color: ni blanco ni negro encima llegan, así que hay que oscurecer el FONDO. #00705c es el mismo verde bajado de luminosidad y da 6,04:1 con blanco. Sólo cambia el color del botón del aviso de cookies: no se toca la variable --sl-teal, que sigue siendo el verde de marca en el resto del sitio. */ #cn-accept-cookie.cn-button{background-color:#00705c !important;color:#fff !important; border:2px solid #00705c !important;} #cn-accept-cookie.cn-button:hover{background-color:#005a4a !important;border-color:#005a4a !important;} /* El anillo de foco era la línea punteada negra por defecto sobre el fondo rgb(50,50,58) de la barra = 1,65:1 (invisible para quien navega con teclado). Regla partida en dos a propósito: los navegadores viejos que no entienden :focus-visible descartan sólo la segunda y se quedan con el anillo siempre. */ #cookie-notice .cn-button:focus{outline:3px solid #fff !important;outline-offset:2px !important;} #cookie-notice .cn-button:focus:not(:focus-visible){outline:none !important;} #cn-refuse-cookie.cn-button{background-color:transparent !important;color:#fff !important; border:2px solid rgba(255,255,255,.55) !important;} #cn-refuse-cookie.cn-button:hover{background-color:rgba(255,255,255,.12) !important;border-color:#fff !important;} #cn-more-info.cn-button{background:transparent !important;border:0 !important; color:#8fe3d2 !important;text-decoration:underline !important; padding:6px 8px !important;font-size:13px !important;font-weight:500 !important; width:auto !important;align-self:center !important;box-shadow:none !important;} #cn-more-info.cn-button:hover{color:#fff !important;} #cn-close-notice{display:none !important;} /* ── FIX móvil 2026-07-13 ─────────────────────────────────────────── (1) Título de página tapado por la cabecera pegajosa: el padding-top:0 (puesto para quitar la franja beige) dejaba el título bajo el header. Devuelvo holgura DENTRO de la banda oscura (el bg .wd-fill la rellena, así el beige NO reaparece). Solo móvil, solo páginas builder. (2) Desborde horizontal: imágenes de producto lazy con width=600 no se reducían en la sección destacada de la home → responsive + red de seguridad overflow-x en la home. ------------------------------------------------------------------- */ @media (max-width:767px){ .wd-builder-on .wd-page-title{ padding-top:58px !important; } /* (regla global de miniatura quitada: rompía el mini-carrito 2026-07-13) */ body.home .sl-featured img, body.home .wd-products-element img{ max-width:100% !important; height:auto !important; } body.home .wd-page-content{ overflow-x:clip; } } /* ── FIX desborde home 2026-07-13 (corrige el intento anterior) ──────── La sección destacada rendería columnas de 600px porque los items tenían min-width:auto (= ancho de la imagen 600px), así la rejilla no encogía. Clave: min-width:0 en los items para que puedan encoger. ── */ @media (max-width:767px){ body.home .sl-featured .products, body.home .wd-products-element .products{ display:grid !important;grid-template-columns:1fr 1fr !important; gap:12px !important;max-width:100% !important;} body.home .sl-featured .wd-product, body.home .wd-products-element .wd-product{min-width:0 !important;max-width:100% !important;} body.home .sl-featured img, body.home .wd-products-element img{max-width:100% !important;height:auto !important;} } /* ── FIX desborde home v2 2026-07-13 (corrige el minmax) ────────────── 1fr tiene min implícito = auto = min-content = 600px (la imagen), por eso las pistas NO encogían. minmax(0,1fr) fuerza min=0 → encogen de verdad. ── */ @media (max-width:767px){ body.home .sl-featured .products, body.home .wd-products-element .products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important;} body.home .sl-featured .wd-product, body.home .wd-products-element .wd-product{min-width:0 !important;} body.home .sl-featured .wd-product-img-link, body.home .wd-products-element .wd-product-img-link{max-width:100% !important;overflow:hidden !important;} body.home .sl-featured .wd-product-img-link img, body.home .wd-products-element .wd-product-img-link img{width:100% !important;max-width:100% !important;height:auto !important;} } /* ── Red de seguridad desborde móvil 2026-07-13 ────────────────────── Causa real: imágenes de producto lazy (width=600) se salen de su celda mientras la rejilla deferida no se activa. Forzamos img responsive + clip en la home (clip NO rompe el header sticky). ── */ /* (regla global de miniatura quitada: rompía el mini-carrito 2026-07-13) */ @media (max-width:767px){ body.home{overflow-x:clip;} body.home .wd-product-img-link,body.home .wd-product-thumb{max-width:100% !important;overflow:hidden !important;} } /* clip en body no funciona (propagación de overflow al viewport). Aplico overflow-x:hidden en un contenedor intermedio (.wd-content-area, que NO contiene el header sticky) para contener el desborde de la home. 2026-07-13 */ @media (max-width:767px){ body.home .wd-content-area{overflow-x:hidden;} } /* ── Banner 5 imágenes, una por diapositiva (2026-07-13) ────────────── Sustituye el fondo único por 5 fotos. Velo blanco via ::before para legibilidad del texto oscuro. Cada slide = una foto (nth-child). ── */ #sl-slider{background:#efece6 !important;} #sl-slider .sl-slide{background-size:cover !important;background-position:center center !important;background-repeat:no-repeat !important;} #sl-slider .sl-slide::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 72% 80% at 50% 52%,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 46%,rgba(255,255,255,0) 78%);} #sl-slider .sl-hero-inner{position:relative;z-index:1;} #sl-slider .sl-slide:nth-child(1){background-image:url('/wp-content/themes/woodmart-child/img/banner-b2b-1.webp');} /* 2026-07-14 auditoria E5: webp (752KB->194KB) + carga diferida. La slide 1 es el LCP y carga siempre; las 2-5 solo cuando el carrusel las activa (.is-active) -> primer pintado del hero: 37KB en vez de 752KB. */ #sl-slider .sl-slide.is-active:nth-child(2){background-image:url('/wp-content/themes/woodmart-child/img/banner-b2b-2.webp');} #sl-slider .sl-slide.is-active:nth-child(3){background-image:url('/wp-content/themes/woodmart-child/img/banner-b2b-3.webp');} #sl-slider .sl-slide.is-active:nth-child(4){background-image:url('/wp-content/themes/woodmart-child/img/banner-b2b-4.webp');} #sl-slider .sl-slide.is-active:nth-child(5){background-image:url('/wp-content/themes/woodmart-child/img/banner-b2b-5.webp');} @media (max-width:767px){ #sl-slider .sl-slide::before{background:linear-gradient(rgba(255,255,255,.64),rgba(255,255,255,.64));} } /* ═══════════════════════════════════════════════════════════ PALETA CÁLIDA CLARA (2026-07-13, opción B del dueño): bloques "negros" (banner de título + tarjeta CTA) → crema cálido con texto marrón oscuro. Solo el pie sigue negro. Acentos teal/naranja se mantienen. =══════════════════════════════════════════════════════════ */ :root{ --sl-cream:#f7f0e2; --sl-cream-hi:#fcf7ee; --sl-cream-lo:#efe3cf; --sl-brown:#3d3123; --sl-brown-soft:#6f5f49; --sl-cream-brd:#e7d9c0; } /* ── Banner de título de página (negro → crema) ── */ .wd-page-title, .wd-page-title .wd-page-title-bg, .wd-page-title .wd-page-title-bg.wd-fill{ background:linear-gradient(180deg,var(--sl-cream-hi) 0%,var(--sl-cream) 58%,var(--sl-cream-lo) 100%) !important;} .wd-page-title{border-bottom:1px solid var(--sl-cream-brd) !important;} .wd-page-title .entry-title,.wd-page-title .title,.wd-page-title h1{ color:var(--sl-brown) !important;text-shadow:none !important;} .wd-page-title .woodmart-breadcrumbs,.wd-page-title .woodmart-breadcrumbs *, .wd-page-title .breadcrumbs,.wd-page-title .breadcrumbs *{color:var(--sl-brown-soft) !important;} .wd-page-title .woodmart-breadcrumbs a:hover{color:var(--sl-teal-d) !important;} .wd-page-title.title-design-centered .entry-title::after{ content:"";display:block;width:56px;height:3px;border-radius:2px; background:var(--sl-teal);margin:16px auto 0;} /* ── Tarjeta CTA de la home (oscura → crema) ── */ .sl-cta-inner{ background:linear-gradient(160deg,var(--sl-cream-hi) 0%,var(--sl-cream) 100%) !important; border:1px solid var(--sl-cream-brd) !important; box-shadow:0 16px 44px rgba(61,49,35,.10) !important;} .sl-cta h2{color:var(--sl-brown) !important;} .sl-cta p{color:var(--sl-brown-soft) !important;} .sl-cta-note{color:var(--sl-brown-soft) !important;} .sl-cta-note a{color:var(--sl-teal-d) !important;} /* Barra herramientas móvil: botón Inicio (SVG casa reemplaza icono tienda) */ .sl-toolbar-home .wd-tools-icon::before{content:none !important;} .sl-toolbar-home .wd-tools-icon svg{width:24px;height:24px;vertical-align:middle;} /* ── Banners de título QUITADOS en todas las páginas salvo la home (2026-07-13, decisión dueño: fuera los banners de las otras páginas). ── */ /* 🔴 2026-08-10 · display:none se llevaba por delante el

de cuatro páginas. Medido con Chrome real + CDP (emulación de dispositivo, 1440 y 360 px), no leyendo el código: en /tienda/, /registro/, /blog/ y /catalogo/ el

SÍ está en el HTML pero mide 0×0, porque este display:none saca la caja entera del árbol de accesibilidad. En /registro/ el resultado era el peor posible: cero encabezados visibles en todo el cuerpo (solo los cuatro

del pie), o sea que quien navega por encabezados no puede llegar al formulario de alta — y es la única vía de conversión que tiene la tienda. La decisión del dueño del 2026-07-13 («fuera los banners salvo la home») NO cambia: el banner sigue sin verse ni ocupar sitio. Lo que cambia es CÓMO se esconde — ocultación visual (el patrón .screen-reader-text del núcleo de WordPress) en lugar de display:none. El white-space:nowrap de aquí NO es el que rompió el carrito en móvil el 2026-07-12: va sobre una caja de 1×1 px, absoluta y con overflow:hidden, así que no puede desbordar nada. Es el patrón literal del núcleo. */ body:not(.home) .wd-page-title-el, body:not(.home) .wd-page-title{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; } /* 🔴 2026-08-10 (tarde) · LO QUE ESA MISMA REGLA SE DEJÓ ATRÁS. La caja mide 1×1 y no se ve… pero lo que hay DENTRO sigue siendo enfocable. Medido pulsando Tab de verdad: en /blog/ y en /registro/ hay un `a«Inicio»` dentro de `nav.wd-breadcrumbs`, y el teclado se mete ahí — el cursor desaparece de la pantalla sin ningún aviso. Es EXACTAMENTE el mismo fallo que se arregló esta mañana en los tres paneles laterales, y me lo volví a hacer yo solo al cambiar display:none por ocultación visual: la ocultación visual es lo correcto para TEXTO (mantiene el h1 audible), pero a un CONTROL hay que sacarlo del orden de tabulación, y eso en CSS sólo lo consiguen display:none o visibility:hidden. Va display:none porque estas migas son decorativas aquí: el mismo BreadcrumbList ya se publica como dato estructurado en el (sl_geo_migas_schema), así que no se pierde nada ni para el cliente ni para Google. El

sigue intacto y audible. */ body:not(.home) .wd-page-title .wd-breadcrumbs, body:not(.home) .wd-page-title-el .wd-breadcrumbs{ display:none !important; } /* 🔴 2026-08-10 (tarde) · El «autor» de las entradas del blog: un avatar genérico y un enlace vacío. TODAS las entradas tienen post_author = 0 (un usuario que no existe), así que el tema pinta, en cada una de las 10 tarjetas:
← 288×22, SÍ se ve author-avatar ← 22×22, el «mystery man» de Gravatar ← 0×0, SIN texto… pero ENFOCABLE Dos defectos a la vez: al cliente le enseñamos un avatar que no significa nada, y a quien navega con teclado le metemos 10 paradas invisibles (medido con Tab real: la parada 20 de /blog/ caía en «A» 0×0 dentro de .wd-post-author). A quién pertenecen los artículos lo decide el dueño — NO se reasigna la autoría por nuestra cuenta. Esto sólo deja de enseñar lo que no dice nada. Las dos reglas se **autocorrigen**: el día que las entradas tengan un autor de verdad, el dejará de estar vacío y ninguna de las dos casará. `:has()` va con respaldo, como pide el §1 del CLAUDE.md: donde no exista (WebView de Android antiguo), al menos desaparece la parada de tabulación. */ .wd-post-author:has(a:empty){ display:none !important; } .wd-post-author a:empty{ display:none !important; } /* ── También fuera el hero oscuro custom .sl-phero (Sobre nosotros, Contacto, etc.) — el dueño quiere TODOS los banners fuera salvo la home. 2026-07-13 ── */ /* 🔴 2026-08-10 · Antes esta línea era `display:none !important`. El banner desaparecía, sí — pero con él desaparecía el

, que vive DENTRO del hero. Medido con el árbol de accesibilidad de Chrome: en /contacto/ y /sobre-nosotros/ un lector de pantalla NO oía «Contacto» ni «Sobre nosotros»; esas páginas se quedaban sin ningún encabezado de nivel 1. (Primer intento: aplicar el patrón de «oculto a la vista» sólo al h1. NO sirve — un hijo de un `display:none` queda fuera del árbol de accesibilidad hagas lo que hagas con el hijo. Había que tratar al padre.) Ahora el hero usa el mismo patrón que `.wd-page-title`: colapsa a 1×1 px recortado, así que **visualmente sigue sin existir** (que es lo que pidió el dueño el 2026-07-13), pero su título y su frase siguen ahí para quien navega con lector de pantalla. Cero píxeles ocupados, cero desbordes. ── */ body:not(.home) .sl-phero{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; border:0 !important; background:none !important; } /* ── Quitar la sección "Recién llegados" (.sl-featured) de la home: el dueño la considera inútil (precios sólo para registrados) 2026-07-13. Además era el origen del desborde horizontal en móvil. ── */ /* (Recién llegados eliminado del contenido del post; regla :has retirada) */ /* 🔴 2026-08-10: estas reglas colgaban de .page-id-20087. La cirugía de IDs del 2026-07-21 (+100000) cambió la home a 120087 y las 34 reglas quedaron muertas durante 20 días: la home perdió el hero a sangre y las tarjetas blancas. Ahora usan body.home — clase estable que NO depende del ID, así no vuelve a romperse cuando la home tenga un tercer ID al pasar a stocklider.com. ── */ /* ── "Color block" POR SECCIÓN (pedido dueño 2026-07-13): cada bloque de contenido = tarjeta blanca redondeada sobre el fondo beige. Empezamos por la home; hero/franja-confianza/CTA quedan aparte. ── */ body.home .sl-sec, body.home .sl-why-wrap{ max-width:1240px; margin:22px auto !important; background:#fff !important; border:1px solid #ece3d2; border-radius:18px; box-shadow:0 6px 26px rgba(61,49,35,.06); } @media (max-width:767px){ body.home .sl-sec,body.home .sl-why-wrap{margin:14px !important;border-radius:14px;padding-left:16px !important;padding-right:16px !important;} } /* ═══ "Color block" por sección — MÉTODO NATIVO (solo CSS sobre clases estables de Woodmart/WooCommerce, SIN :has() ni JS → cero coste de rendimiento). 2026-07-13 ═══ */ /* Páginas de contenido: cada
del cuerpo = tarjeta (hero/CTA excluidos) */ body:not(.home) .entry-content > section.sl-sec{ background:#fff;border:1px solid #ece3d2;border-radius:16px; box-shadow:0 6px 24px rgba(61,49,35,.06);margin:22px auto !important;} /* Tienda/archivos: la columna de contenido (barra+grid) = tarjeta; el sidebar NO */ .wp-block-wd-off-content{ background:#fff;border:1px solid #ece3d2;border-radius:16px; box-shadow:0 6px 24px rgba(61,49,35,.06);padding:22px 24px;} /* Carrito (bloques WooCommerce): columnas y estado vacío = tarjetas */ .wp-block-woocommerce-cart-items-block, .wp-block-woocommerce-cart-totals-block, .wp-block-woocommerce-empty-cart-block{ background:#fff;border:1px solid #ece3d2;border-radius:16px; box-shadow:0 6px 24px rgba(61,49,35,.06);padding:22px 24px;} @media (max-width:767px){ .wp-block-wd-off-content, .wp-block-woocommerce-cart-items-block, .wp-block-woocommerce-cart-totals-block, .wp-block-woocommerce-empty-cart-block{padding:16px;border-radius:14px;} body:not(.home) .entry-content > section.sl-sec{margin:14px 0 !important;} } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Registro (Ultimate Member) — tarjeta + 2 columnas * UM fija el ancho a 450px (.um-3191.um{max-width:450px}) y apila TODO en una * sola columna -> formulario larguisimo. Aqui: ensanchamos, lo metemos en la * misma tarjeta blanca del resto del sitio y lo pasamos a rejilla de 2 * columnas en escritorio. CSS nativo puro: sin JS, sin :has(), sin tocar la * configuracion del formulario de UM. Movil = 1 columna automatica. * Revertir = borrar este bloque. * ═════════════════════════════════════════════════════════════════════════ */ body .um.um-register.um-3191{ max-width:980px !important; margin:26px auto 40px !important; background:#fff; border:1px solid #ece3d2; border-radius:18px; box-shadow:0 6px 26px rgba(61,49,35,.06); padding:32px 34px 24px; } body .um.um-register .um-form{max-width:none;} /* rejilla de 2 columnas solo en escritorio */ @media (min-width:768px){ body .um.um-register .um-row .um-col-1{ display:grid; grid-template-columns:1fr 1fr; column-gap:24px; row-gap:0; align-items:start; } body .um.um-register .um-row .um-col-1 > .um-field{ margin:0 0 16px !important; min-width:0; /* evita desbordes de los select largos */ } /* estos van a ancho completo (calle larga + terminos) */ body .um.um-register .um-field[data-key="billing_address_1"], body .um.um-register .um-field[data-key="use_terms_conditions_agreement"]{ grid-column:1 / -1; } } /* pulido de los campos, en linea con la paleta calida */ body .um.um-register .um-field-label > label{ font-weight:700; color:var(--sl-ink,#28313a); margin-bottom:6px; } body .um.um-register input[type=text], body .um.um-register input[type=tel], body .um.um-register input[type=email], body .um.um-register input[type=password], body .um.um-register select, body .um.um-register .um-s2-container .select2-selection{ border:1px solid #e2d8c6 !important; border-radius:10px !important; background:#fffdf9 !important; box-shadow:none !important; } body .um.um-register input[type=text]:focus, body .um.um-register input[type=tel]:focus, body .um.um-register input[type=email]:focus, body .um.um-register input[type=password]:focus, body .um.um-register select:focus{ border-color:var(--sl-teal,#00ab87) !important; box-shadow:0 0 0 3px rgba(0,171,135,.12) !important; } body .um.um-register .um-col-alt{text-align:center;} body .um.um-register .um-button#um-submit-btn{ min-width:260px; border-radius:999px !important; font-weight:700; } /* alinear los inputs de cada fila: unos campos llevan icono "?" y otros no, asi que el input quedaba a distinta altura. Empujamos el area del campo al fondo de la celda -> los inputs de una misma fila quedan alineados. */ @media (min-width:768px){ body .um.um-register .um-row .um-col-1 > .um-field{ display:flex; flex-direction:column; } body .um.um-register .um-row .um-col-1 > .um-field > .um-field-area{ margin-top:auto; } body .um.um-register .um-field[data-key="use_terms_conditions_agreement"]{ display:block !important; } } @media (min-width:768px){ /* corrige el align-items:start de arriba, que impedia que las celdas se estirasen y por tanto que margin-top:auto alineara los inputs */ body .um.um-register .um-row .um-col-1{align-items:stretch !important;} } /* La causa real del desalineado: UM saca el icono de ayuda (span.um-tip) a una LINEA PROPIA debajo de la etiqueta -> los campos con "?" quedan mas altos que los de al lado. Metemos icono + etiqueta + "?" en la misma linea (flex), asi todas las etiquetas miden lo mismo y las columnas cuadran solas. */ body .um.um-register .um-field-label{ display:flex !important; align-items:center; gap:7px; flex-wrap:nowrap; margin-bottom:8px; min-height:24px; } body .um.um-register .um-field-label > label{ float:none !important; margin:0 !important; display:inline-flex; align-items:center; gap:4px; line-height:1.25; } body .um.um-register .um-field-label > .um-field-label-icon{ float:none !important; margin:0 !important; display:inline-flex; align-items:center; line-height:1; } body .um.um-register .um-field-label > .um-tip{ float:none !important; margin:0 !important; display:inline-flex; align-items:center; line-height:1; } body .um.um-register .um-field-label > .um-clear{display:none !important;} /* el select de R.E lleva un placeholder larguisimo que parte en 2 lineas y estira la fila: lo dejamos a una sola linea con puntos suspensivos. */ body .um.um-register .um-field[data-key="julio_re"] .select2-selection__rendered, body .um.um-register .um-field[data-key="julio_re"] .select2-selection__placeholder{ white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; } /* aviso "esta direccion es la de facturacion" en el formulario de registro */ .sl-reg-aviso{ display:flex; gap:14px; align-items:flex-start; background:linear-gradient(160deg,#fcf7ee,#f7f0e2); border:1px solid #e7d9c0; border-left:4px solid var(--sl-teal,#00ab87); border-radius:14px; padding:16px 18px; margin:0 0 26px; color:#3d3123; } .sl-reg-aviso-icono{ flex:0 0 34px;width:34px;height:34px;border-radius:50%; background:var(--sl-teal,#00ab87);color:#fff; display:flex;align-items:center;justify-content:center; } .sl-reg-aviso-txt{flex:1;min-width:0;} .sl-reg-aviso-txt strong{color:#2b2318;} .sl-reg-aviso-txt > strong{display:block;font-size:15px;margin-bottom:4px;letter-spacing:.2px;} .sl-reg-aviso-txt p{margin:0 0 8px;font-size:14px;line-height:1.5;color:#6f5f49;} .sl-reg-aviso-txt ul{margin:0;padding-left:18px;} .sl-reg-aviso-txt li{font-size:13.5px;line-height:1.55;color:#6f5f49;margin:0 0 3px;} @media (max-width:767px){ .sl-reg-aviso{padding:14px;gap:11px;} .sl-reg-aviso-txt > strong{font-size:14px;} } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Botón "Regístrese" del invitado: icono de carrito encima del texto * * Woodmart usa el estilo "replace" en el botón de añadir al carrito del listado: * .wd-add-btn-replace>a:hover span { transform:translateY(-100%) } (el texto se va) * .wd-add-btn-replace>a:hover:before { transform:translateY(0) } (entra el carrito) * Funciona porque el texto va dentro de un . Pero el botón que ve el * INVITADO lo pinta otro codigo y el texto va SUELTO, sin : * Regístrese * -> no hay nada que deslizar, el texto se queda, y el icono del carrito le cae * encima. En movil igual (el toque deja el :hover pegado). * * Ademas ese boton NO es "añadir al carrito", es un enlace a login: el icono del * carrito ahi no pinta nada. Le quitamos la animacion "replace" solo a el. * Selector por href -> no toca el boton real de añadir al carrito del cliente. * ═════════════════════════════════════════════════════════════════════════ */ .wd-add-btn > a[href*="/login/"]::before, .wd-add-btn > a[href*="/login/"]::after, .wd-add-btn > a[href*="/registro/"]::before, .wd-add-btn > a[href*="/registro/"]::after{ content:none !important; display:none !important; } .wd-add-btn > a[href*="/login/"], .wd-add-btn > a[href*="/registro/"]{ overflow:visible !important; display:flex !important; align-items:center; justify-content:center; text-align:center; padding:8px 16px !important; line-height:1.25; white-space:normal; /* si el texto es largo, que envuelva en vez de desbordar */ } .wd-add-btn > a[href*="/login/"]:hover, .wd-add-btn > a[href*="/login/"]:hover span, .wd-add-btn > a[href*="/registro/"]:hover, .wd-add-btn > a[href*="/registro/"]:hover span{ transform:none !important; opacity:1 !important; } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · SOLUCION DEFINITIVA al solape del boton del listado * * Woodmart usa el estilo "replace" en TODOS los botones de añadir al carrito * del listado (.wd-add-btn-replace): * >a{overflow:hidden} * >a:before{content:var(--wd-btn-icon); position:absolute; inset:0; * transform:translateY(100%)} <- el carrito, escondido abajo * >a:hover span {transform:translateY(-100%)} <- el texto se va arriba * >a:hover:before{transform:translateY(0)} <- entra el carrito * * Problemas reales: * 1) INVITADO: su boton lo pinta otro codigo y el texto va SUELTO (sin ) * -> no hay nada que deslizar, el texto se queda y el carrito le cae encima. * 2) CLIENTE: el tiene DOS spans hijos directos (icono + texto) y la regla * ataca a "span" a secas -> se mueven los dos; en tarjetas estrechas y en * movil el icono absoluto queda pisando el texto. * 3) MOVIL: no hay hover real. Al tocar, el :hover se queda PEGADO -> el boton * se queda a medio animar, con icono y texto encima. * * Decision: desactivamos la animacion "replace" en todo el listado. El texto del * boton se ve siempre y no hay nada que se solape (ni invitado, ni cliente, ni * escritorio, ni movil). SI mantenemos el spinner de carga del AJAX (::after), * que si aporta (avisa de que se esta añadiendo). * Revertir = borrar este bloque. * ═════════════════════════════════════════════════════════════════════════ */ .wd-product .wd-add-btn-replace > a::before, .wd-product .wd-add-btn > a::before{ content:none !important; /* fuera el icono de carrito flotante */ display:none !important; } .wd-product .wd-add-btn-replace > a, .wd-product .wd-add-btn > a{ overflow:visible !important; /* ya no hace falta recortar nada */ display:flex !important; align-items:center; justify-content:center; gap:6px; padding:8px 14px !important; line-height:1.25; white-space:normal; /* textos largos envuelven, no desbordan */ text-align:center; } /* nada se desplaza al pasar el raton (ni con el :hover pegado del movil) */ .wd-product .wd-add-btn-replace > a:hover > span, .wd-product .wd-add-btn-replace > a > span, .wd-product .wd-add-btn > a:hover > span, .wd-product .wd-add-btn > a > span{ transform:none !important; min-height:0 !important; padding:0 !important; } /* el spinner del AJAX SI se queda (::after) — solo lo recolocamos al centro */ .wd-product .wd-add-btn-replace > a.loading::after{ top:calc(50% - 9px) !important; inset-inline-start:calc(50% - 9px) !important; } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Formularios de Ultimate Member: LOGIN / RECUPERAR CONTRASEÑA * Mismo tratamiento que el registro: tarjeta blanca, etiquetas en una sola * linea (UM saca el icono "?" a una linea propia y descuadra el campo), * inputs con la paleta calida y boton ancho. CSS nativo, sin JS. * (El registro va aparte porque ademas lleva rejilla de 2 columnas.) * ═════════════════════════════════════════════════════════════════════════ */ body .um.um-login, body .um.um-password{ max-width:520px !important; margin:30px auto 44px !important; background:#fff; border:1px solid #ece3d2; border-radius:18px; box-shadow:0 6px 26px rgba(61,49,35,.06); padding:32px 34px 26px; } body .um.um-login .um-form, body .um.um-password .um-form{max-width:none;} /* etiqueta + icono + "?" en la MISMA linea (si no, el campo se descuadra) */ body .um.um-login .um-field-label, body .um.um-password .um-field-label{ display:flex !important; align-items:center; gap:7px; flex-wrap:nowrap; margin-bottom:8px; min-height:24px; } body .um.um-login .um-field-label > label, body .um.um-password .um-field-label > label{ float:none !important; margin:0 !important; display:inline-flex; align-items:center; gap:4px; line-height:1.25; font-weight:700; color:var(--sl-ink,#28313a); } body .um.um-login .um-field-label > .um-field-label-icon, body .um.um-login .um-field-label > .um-tip, body .um.um-password .um-field-label > .um-field-label-icon, body .um.um-password .um-field-label > .um-tip{ float:none !important; margin:0 !important; display:inline-flex; align-items:center; line-height:1; } body .um.um-login .um-field-label > .um-clear, body .um.um-password .um-field-label > .um-clear{display:none !important;} body .um.um-login input[type=text], body .um.um-login input[type=password], body .um.um-password input[type=text], body .um.um-password input[type=password]{ border:1px solid #e2d8c6 !important; border-radius:10px !important; background:#fffdf9 !important; box-shadow:none !important; } body .um.um-login input[type=text]:focus, body .um.um-login input[type=password]:focus, body .um.um-password input[type=text]:focus, body .um.um-password input[type=password]:focus{ border-color:var(--sl-teal,#00ab87) !important; box-shadow:0 0 0 3px rgba(0,171,135,.12) !important; } body .um.um-login .um-button#um-submit-btn, body .um.um-password .um-button#um-submit-btn{ width:100%; border-radius:999px !important; font-weight:700; } body .um.um-login .um-col-alt-b{text-align:center;} body .um.um-login .um-col-alt-b a{color:var(--sl-brown-soft,#6f5f49);} body .um.um-login .um-col-alt-b a:hover{color:var(--sl-teal,#00ab87);} /* pie añadido: "¿Aun no tienes cuenta? -> Registrate" */ .sl-login-registro{ margin:22px auto 0; padding:18px 16px 4px; border-top:1px solid #f0e9db; text-align:center; font-size:14px; color:var(--sl-brown-soft,#6f5f49); } .sl-login-registro strong{display:block;margin-bottom:10px;color:#3d3123;font-size:15px;} .sl-login-registro .sl-login-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 26px; border-radius:999px; border:1px solid var(--sl-teal,#00ab87); color:var(--sl-teal,#00ab87); font-weight:700; text-decoration:none; transition:background .18s ease,color .18s ease; } .sl-login-registro .sl-login-btn:hover{background:var(--sl-teal,#00ab87); color:#fff;} @media (max-width:767px){ body .um.um-login, body .um.um-password{padding:24px 18px 20px; margin:20px auto 32px !important;} } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Cápsula del carrito: control de cantidad − / + * Los pasos (de 12 en 12, de 1 en 1...) los decide el plugin WC_MMQ; aquí solo * pintamos. Táctil: botones de 34px (mínimo cómodo en móvil). * ═════════════════════════════════════════════════════════════════════════ */ .widget_shopping_cart .sl-mc-qty{ display:inline-flex; align-items:center; gap:0; border:1px solid #e2d8c6; border-radius:999px; background:#fffdf9; overflow:hidden; vertical-align:middle; margin:6px 10px 4px 0; } .widget_shopping_cart .sl-mc-btn{ width:34px; height:34px; min-width:34px; display:flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--sl-teal,#00ab87); font-size:17px; font-weight:800; line-height:1; cursor:pointer; padding:0; transition:background .15s ease, color .15s ease; } .widget_shopping_cart .sl-mc-btn:hover:not(:disabled){ background:var(--sl-teal,#00ab87); color:#fff; } .widget_shopping_cart .sl-mc-btn:disabled{ color:#c9bda8; cursor:not-allowed; } .widget_shopping_cart .sl-mc-num{ min-width:38px; text-align:center; font-weight:800; font-size:14px; color:#3d3123; padding:0 2px; font-variant-numeric:tabular-nums; } .widget_shopping_cart .sl-mc-qty.sl-mc-cargando{ opacity:.45; pointer-events:none; } .widget_shopping_cart .sl-mc-linea{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13px; color:#8a7c68; } .widget_shopping_cart .sl-mc-paso{ font-size:11px; font-weight:700; color:var(--sl-teal,#00ab87); background:rgba(0,171,135,.10); border-radius:999px; padding:2px 8px; white-space:nowrap; } .widget_shopping_cart .sl-mc-precio{ color:#8a7c68; } .widget_shopping_cart .sl-line-total{ color:#3d3123; font-weight:800; } @media (max-width:767px){ .widget_shopping_cart .sl-mc-btn{ width:38px; height:38px; min-width:38px; } /* dedo */ .widget_shopping_cart .sl-mc-linea{ width:100%; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · POR QUÉ los botones − / + no respondían y saltaba a la ficha: * * La plantilla del mini-carrito de Woodmart (woodmart/woocommerce/cart/mini-cart.php) * mete como PRIMER hijo de cada
  • un enlace-manta invisible: * Show * .wd-fill { position:absolute; inset:0 } -> tapa TODA la fila * .cart-item-link { z-index:1; font-size:0 } -> invisible pero por encima * * O sea: al pulsar el "+" no pulsabas el botón, pulsabas la manta -> te llevaba a * la ficha del producto. El JS ni se enteraba (el click nunca llegaba al botón). * * Arreglo: subir SOLO el control de cantidad por encima de la manta (z-index 3 > 1). * El resto de la fila (foto, título, precio) sigue siendo clicable para ir a la * ficha, que es el comportamiento que Woodmart quiere. * ═════════════════════════════════════════════════════════════════════════ */ .widget_shopping_cart .woocommerce-mini-cart-item, .widget_shopping_cart .mini_cart_item{ position:relative; /* la manta ya es absolute; nos aseguramos del contexto */ } .widget_shopping_cart .sl-mc-qty{ position:relative; z-index:3; /* por encima de .cart-item-link (z-index:1) */ } .widget_shopping_cart .sl-mc-btn{ position:relative; z-index:4; pointer-events:auto; } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Quitar «Cambiar dirección» del CARRITO (decisión del dueño: * la dirección se cambia en el checkout, no en el carrito). * * POR QUÉ IMPORTA (no es solo estética): * El carrito es de BLOQUES -> ese enlace abre la calculadora de la Store API * (`CartUpdateCustomer`), que: * - solo pide PAÍS / PROVINCIA / CIUDAD / CP (NO pide la calle), y * - llama a `$customer->save()` -> lo ESCRIBE en la ficha del cliente. * Resultado: al cliente le quedaba en su ficha una dirección de ENVÍO a medias * (ciudad y CP, sin calle). Si el ERP lee la dirección de envío de la ficha, * recibiría una dirección incompleta. Quitando el enlace, eso ya no puede pasar. * * No hay interruptor nativo: WooCommerce ELIMINA el ajuste * `woocommerce_enable_shipping_calc` cuando el carrito es de bloques * (src/Blocks/Shipping/ShippingController.php::remove_shipping_settings). * * Dejamos el texto «Enviar a Sevilla.» (informa de con qué dirección se calcula * el envío) y quitamos solo el botón. Selector estructural: no depende del * nombre de clase del botón, que WooCommerce cambia entre versiones. * ═════════════════════════════════════════════════════════════════════════ */ /* CORRECCION 2026-07-14: el boton NO cuelga de .wc-block-components-shipping-address, es hermano y usa clases BEM con doble guion bajo. Nombres reales sacados de woocommerce/assets/client/blocks/cart.css: .wc-block-components-totals-shipping__change-address-button .wc-block-components-totals-shipping__change-address__link (mi primer intento apuntaba al contenedor equivocado y no ocultaba nada). */ .wc-block-components-totals-shipping__change-address-button, .wc-block-components-totals-shipping__change-address__link, .wc-block-components-totals-shipping .wc-block-components-totals-shipping__change-address-button, .wc-block-components-totals-shipping .wc-block-components-totals-shipping__change-address__link, .wc-block-components-totals-shipping .wc-block-components-shipping-address button, .wc-block-components-totals-shipping .wc-block-components-shipping-address a{ display:none !important; } .wc-block-components-totals-shipping .wc-block-components-shipping-address{ margin-top:8px !important; } .wc-block-components-totals-shipping .wc-block-components-totals-shipping-address-summary{ color:#8a7c68; font-size:13px; } /* 2026-07-14 (3er intento, este si): el carrito NO renderiza el calculador de BLOQUES sino el CLASICO (cart/shipping-calculator.php). Lo delata el propio formulario: "País/Región *", "Región/Provincia (opcional)", "Ciudad:", "Código postal:" + botón "Actualizar" -> son los campos calc_shipping_*. Mis dos intentos anteriores apuntaban a clases del carrito de bloques (.wc-block-components-totals-shipping__change-address-*), que en esta página NO EXISTEN. Aquí las clases reales son las clásicas. El interruptor NATIVO (woocommerce_enable_shipping_calc = no) ya lo apaga; esto es solo el cinturón de seguridad por si algún plugin lo vuelve a pintar. */ .woocommerce .shipping-calculator-button, .woocommerce .shipping-calculator-form, .woocommerce-shipping-calculator, form.woocommerce-shipping-calculator, .cart_totals .shipping-calculator-button, .cart_totals .shipping-calculator-form{ display:none !important; } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Checkout: tarjeta de dirección de facturación + 2 opciones de envío * ═════════════════════════════════════════════════════════════════════════ */ /* Los únicos campos de facturación que el Checkout Manager deja vivos son País y Provincia. Se quedan en el DOM (así se siguen ENVIANDO y el IVA se calcula bien) pero NO se ven: si el cliente pudiera cambiarlos sin poder tocar calle/CP, crearía direcciones incoherentes (calle de Sevilla con provincia de Segovia) — que es justo el fallo que tuvimos en el carrito. */ /* CORRECCIÓN 2026-07-14: este selector era DEMASIADO AMPLIO. Con `.woocommerce-checkout` también casaba en «Mi cuenta» -> escondía País y Provincia TAMBIÉN en la pestaña de dirección de facturación, y al guardar saltaba «El campo País / Región es obligatorio» (se enviaban vacíos). Lo acotamos al FORMULARIO del checkout, que es lo único que queríamos. */ form.checkout #billing_country_field, form.checkout #billing_state_field, form.woocommerce-checkout #billing_country_field, form.woocommerce-checkout #billing_state_field{ display:none !important; } .sl-co-factura{ background:linear-gradient(160deg,#fcf7ee,#f7f0e2); border:1px solid #e7d9c0; border-left:4px solid var(--sl-teal,#00ab87); border-radius:14px; padding:18px 20px; margin:0 0 20px; } .sl-co-factura--aviso{ border-left-color:#e0752d; background:linear-gradient(160deg,#fff6ed,#fdeee0); } .sl-co-factura-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; } .sl-co-factura-tit{ font-weight:800; color:#2b2318; font-size:15px; } .sl-co-factura-edit{ font-size:13px; color:var(--sl-teal,#00ab87); font-weight:700; text-decoration:underline; } .sl-co-factura-dir{ font-style:normal; line-height:1.65; color:#3d3123; font-size:14px; background:#fff; border:1px solid #ece3d2; border-radius:10px; padding:12px 14px; margin:0 0 10px; } .sl-co-factura-nif{ color:#6f5f49; font-size:13px; } .sl-co-factura-nota{ margin:0; font-size:13px; line-height:1.55; color:#6f5f49; } .sl-co-factura-falta{ margin:0 0 10px; font-size:14px; line-height:1.6; color:#8a4a13; font-weight:600; background:#fff; border:1px solid #f0d6bb; border-radius:10px; padding:12px 14px; } .sl-co-envio{ margin:0 0 22px; } .sl-co-envio-tit{ display:block; font-weight:800; color:#2b2318; font-size:15px; margin-bottom:10px; } .sl-co-envio-op{ display:flex; align-items:flex-start; gap:12px; border:1px solid #ece3d2; border-radius:12px; padding:14px 16px; margin:0 0 10px; background:#fff; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; } .sl-co-envio-op:hover{ border-color:#d9cbb2; } .sl-co-envio-op:has(input:checked){ border-color:var(--sl-teal,#00ab87); box-shadow:0 0 0 3px rgba(0,171,135,.10); } .sl-co-envio-op input[type=radio]{ margin:3px 0 0; flex:0 0 auto; accent-color:var(--sl-teal,#00ab87); width:18px; height:18px; } .sl-co-envio-op strong{ display:block; color:#2b2318; font-size:14.5px; } .sl-co-envio-op small{ display:block; color:#8a7c68; font-size:13px; margin-top:2px; line-height:1.45; } /* La cabecera nativa "¿Enviar a una dirección diferente?" ya no hace falta: la sustituyen las dos opciones de arriba. La casilla real sigue existiendo (la sincronizamos por JS), solo la ocultamos visualmente. OJO: NO usamos :has() para esto — WP Fastest Cache lo borra al minificar. (El :has() de arriba es solo cosmético: si se pierde, no rompe nada.) */ .woocommerce-checkout h3#ship-to-different-address{ display:none !important; } @media (max-width:767px){ .sl-co-factura{ padding:14px; } .sl-co-envio-op{ padding:12px 14px; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Select2 (los desplegables de País / Provincia del checkout, del * registro, etc.). El look por defecto es feo: bloque naranja chillón para la * opción resaltada, caja de búsqueda pelada, esquinas duras. * * OJO: el desplegable de Select2 se inyecta como hijo directo de , NO * dentro del formulario. Por eso las reglas van SIN prefijo de página: si las * limitáramos a .woocommerce-checkout no pintarían nada. * ═════════════════════════════════════════════════════════════════════════ */ /* ── el campo cerrado ── */ .select2-container--default .select2-selection--single, .select2-container .select2-selection--single{ border:1px solid #e2d8c6 !important; border-radius:10px !important; background:#fffdf9 !important; height:auto !important; min-height:46px; display:flex; align-items:center; padding:0 14px !important; box-shadow:none !important; transition:border-color .15s ease, box-shadow .15s ease; } .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#3d3123 !important; line-height:1.4 !important; padding:0 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100% !important; right:10px !important; } .select2-container--open .select2-selection--single, .select2-container--focus .select2-selection--single{ border-color:var(--sl-teal,#00ab87) !important; box-shadow:0 0 0 3px rgba(0,171,135,.12) !important; } /* ── el panel desplegado (cuelga de ) ── */ .select2-container .select2-dropdown, .select2-dropdown{ border:1px solid #e2d8c6 !important; border-radius:12px !important; overflow:hidden; box-shadow:0 12px 34px rgba(61,49,35,.14) !important; background:#fff !important; margin-top:6px; } .select2-dropdown--above{ margin-top:0; margin-bottom:6px; } /* ── la caja de búsqueda ── */ .select2-container .select2-search--dropdown{ padding:10px !important; background:#faf6ef; border-bottom:1px solid #f0e9db; } .select2-container .select2-search--dropdown .select2-search__field{ border:1px solid #e2d8c6 !important; border-radius:9px !important; padding:9px 12px !important; background:#fff !important; font-size:14px; outline:none !important; box-shadow:none !important; } .select2-container .select2-search--dropdown .select2-search__field:focus{ border-color:var(--sl-teal,#00ab87) !important; box-shadow:0 0 0 3px rgba(0,171,135,.12) !important; } /* ── la lista de opciones ── */ .select2-container .select2-results__options{ max-height:280px !important; padding:6px !important; } .select2-container .select2-results__option{ border-radius:8px !important; padding:9px 12px !important; font-size:14px; color:#3d3123; margin:1px 0; } /* el naranja chillón fuera: resaltado = verde de marca, suave */ .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected], .select2-container--default .select2-results__option--highlighted{ background:rgba(0,171,135,.10) !important; color:#1b6b57 !important; font-weight:600; } /* la opción ya elegida */ .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true]{ background:var(--sl-teal,#00ab87) !important; color:#fff !important; font-weight:700; } .select2-container--default .select2-results__option[aria-selected=true].select2-results__option--highlighted{ background:#00997a !important; color:#fff !important; } /* barra de scroll discreta */ .select2-container .select2-results__options::-webkit-scrollbar{ width:8px; } .select2-container .select2-results__options::-webkit-scrollbar-thumb{ background:#ddd0b8; border-radius:8px; border:2px solid #fff; } .select2-container .select2-results__options::-webkit-scrollbar-track{ background:transparent; } @media (max-width:767px){ .select2-container .select2-results__option{ padding:12px !important; } /* dedo */ .select2-container--default .select2-selection--single{ min-height:48px; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Página de GRACIAS (pedido recibido) * Estructura real sacada de woodmart/woocommerce/checkout/thankyou.php * (renderizada en el servidor, no adivinada): * .woocommerce-order * p.woocommerce-thankyou-order-received <- "Gracias..." * ul.woocommerce-order-overview <- nº pedido / fecha / email / total / pago * section.woocommerce-bacs-bank-details <- datos bancarios (transferencia) * section.woocommerce-order-details <- tabla del pedido * section.woocommerce-customer-details <- las 2 direcciones * .wooccm_order_attachments_wrapper <- subir ficheros (no lo usamos) * ═════════════════════════════════════════════════════════════════════════ */ .woocommerce-order{ max-width:920px; margin:0 auto; } /* ── "Gracias. Tu pedido ha sido recibido." → tarjeta de éxito ── */ .woocommerce-order p.woocommerce-thankyou-order-received{ display:flex; align-items:center; gap:14px; background:linear-gradient(160deg,#eafaf5,#dff5ee) !important; border:1px solid #b9e7d8 !important; border-left:5px solid var(--sl-teal,#00ab87) !important; border-radius:16px !important; padding:20px 24px !important; margin:0 0 22px !important; color:#12604d !important; font-size:18px !important; font-weight:800 !important; text-align:left !important; box-shadow:0 6px 24px rgba(0,171,135,.10); } .woocommerce-order p.woocommerce-thankyou-order-received::before{ content:"✓"; flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--sl-teal,#00ab87); color:#fff; border-radius:50%; font-size:18px; font-weight:900; line-height:1; } /* ── resumen del pedido (nº / fecha / email / total / pago) ── */ .woocommerce-order ul.woocommerce-order-overview{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0; list-style:none !important; margin:0 0 22px !important; padding:0 !important; background:#fff; border:1px solid #ece3d2; border-radius:16px; box-shadow:0 6px 24px rgba(61,49,35,.06); overflow:hidden; } .woocommerce-order ul.woocommerce-order-overview li{ border:0 !important; border-right:1px solid #f3ece0 !important; padding:18px 16px !important; margin:0 !important; text-align:center; font-size:12px !important; text-transform:uppercase; letter-spacing:.4px; color:#8a7c68 !important; font-weight:700; } .woocommerce-order ul.woocommerce-order-overview li:last-child{ border-right:0 !important; } .woocommerce-order ul.woocommerce-order-overview li strong{ display:block; margin-top:6px; font-size:16px; letter-spacing:0; text-transform:none; color:#2b2318; font-weight:800; } .woocommerce-order ul.woocommerce-order-overview li.total strong{ color:var(--sl-teal,#00ab87); } /* ── tarjetas comunes de las secciones ── */ .woocommerce-order section.woocommerce-bacs-bank-details, .woocommerce-order section.woocommerce-order-details, .woocommerce-order section.woocommerce-customer-details{ background:#fff; border:1px solid #ece3d2; border-radius:16px; box-shadow:0 6px 24px rgba(61,49,35,.06); padding:24px 26px; margin:0 0 22px; } .woocommerce-order h2, .woocommerce-order .woocommerce-order-details__title, .woocommerce-order .wc-bacs-bank-details-heading{ font-size:18px !important; font-weight:800 !important; color:#2b2318 !important; margin:0 0 16px !important; padding:0 0 12px !important; border-bottom:1px solid #f0e9db; } /* ── datos bancarios: IBAN legible y copiable ── */ .woocommerce-order .wc-bacs-bank-details-account-name{ font-size:15px !important; font-weight:800; color:#3d3123; margin:0 0 12px; } .woocommerce-order ul.wc-bacs-bank-details{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; } .woocommerce-order ul.wc-bacs-bank-details li{ background:#faf6ef; border:1px solid #f0e9db; border-radius:10px; padding:12px 14px; margin:0 !important; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#8a7c68; font-weight:700; } .woocommerce-order ul.wc-bacs-bank-details li strong{ display:block; margin-top:5px; text-transform:none; letter-spacing:0; font-size:15px; color:#2b2318; font-weight:800; word-break:break-all; } .woocommerce-order ul.wc-bacs-bank-details li.iban strong{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; } /* ── tabla del pedido ── */ .woocommerce-order table.woocommerce-table--order-details{ width:100%; border-collapse:collapse; margin:0; } .woocommerce-order table.woocommerce-table--order-details th, .woocommerce-order table.woocommerce-table--order-details td{ border:0 !important; border-bottom:1px solid #f3ece0 !important; padding:13px 4px !important; font-size:14px; background:transparent !important; } .woocommerce-order table.woocommerce-table--order-details thead th{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#8a7c68 !important; font-weight:800; } .woocommerce-order table.woocommerce-table--order-details tfoot th{ color:#6f5f49 !important; font-weight:700; } .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td{ border-bottom:0 !important; font-size:17px; font-weight:800; color:#2b2318 !important; padding-top:16px !important; } .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td .amount{ color:var(--sl-teal,#00ab87); } /* ── las 2 direcciones ── */ .woocommerce-order .woocommerce-columns--addresses{ display:grid !important; grid-template-columns:1fr 1fr; gap:16px; margin:0 !important; } .woocommerce-order .woocommerce-columns--addresses .woocommerce-column{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; background:#faf6ef; border:1px solid #f0e9db; border-radius:12px; padding:16px 18px !important; } .woocommerce-order .woocommerce-columns--addresses .woocommerce-column__title{ font-size:13px !important; text-transform:uppercase; letter-spacing:.5px; color:#8a7c68 !important; font-weight:800; border-bottom:0 !important; padding:0 !important; margin:0 0 10px !important; } .woocommerce-order .woocommerce-columns--addresses address{ font-style:normal !important; line-height:1.7; font-size:14px; color:#3d3123; border:0 !important; padding:0 !important; } .woocommerce-order .woocommerce-customer-details--phone, .woocommerce-order .woocommerce-customer-details--email{ margin:8px 0 0 !important; font-size:13px; color:#8a7c68; padding-left:0 !important; } /* ── bloque de "subir ficheros" del Checkout Manager: no lo usamos, fuera. (Revertir = borrar esta regla.) ── */ .wooccm_order_attachments_wrapper{ display:none !important; } @media (max-width:767px){ .woocommerce-order section.woocommerce-bacs-bank-details, .woocommerce-order section.woocommerce-order-details, .woocommerce-order section.woocommerce-customer-details{ padding:18px 16px; } .woocommerce-order .woocommerce-columns--addresses{ grid-template-columns:1fr; } .woocommerce-order ul.woocommerce-order-overview li{ border-right:0 !important; border-bottom:1px solid #f3ece0 !important; } .woocommerce-order p.woocommerce-thankyou-order-received{ font-size:16px !important; padding:16px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Mi cuenta → pestañas «Dirección de facturación» / «de envío» * (las pinta um-woocommerce con el formulario nativo de WooCommerce). * * POR QUÉ SE DESBORDA: WooCommerce maqueta esos formularios con * `.form-row-first` / `.form-row-last`, que son FLOAT + width:47%. Metidos * dentro de la columna estrecha de la cuenta de UM (que además tiene su propio * padding), se salen de la caja. Clásico. * * Solución: quitamos los floats y usamos una rejilla. Escritorio 2 columnas, * móvil 1. Todo con box-sizing:border-box y max-width:100% para que nada pueda * salirse. Sin JS. * ═════════════════════════════════════════════════════════════════════════ */ .um-account-main, .um-account-main .um-account-heading, .um-account-main form, .um-account-main .woocommerce{ min-width:0; /* imprescindible: si no, el grid/flex padre no deja encoger */ max-width:100%; box-sizing:border-box; } /* la rejilla de campos */ .um-account-main .woocommerce-billing-fields__field-wrapper, .um-account-main .woocommerce-shipping-fields__field-wrapper, .um-account-main .woocommerce-address-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; column-gap:18px; row-gap:0; align-items:start; } .um-account-main .woocommerce-billing-fields__field-wrapper > .form-row, .um-account-main .woocommerce-shipping-fields__field-wrapper > .form-row, .um-account-main .woocommerce-address-fields__field-wrapper > .form-row, .um-account-main .form-row{ float:none !important; width:auto !important; max-width:100% !important; min-width:0 !important; margin:0 0 16px !important; padding:0 !important; box-sizing:border-box; } /* los que deben ocupar toda la fila */ .um-account-main .form-row-wide, .um-account-main #billing_address_1_field, .um-account-main #billing_address_2_field, .um-account-main #billing_company_field, .um-account-main #billing_nif_field, .um-account-main #billing_country_field, .um-account-main #billing_email_field, .um-account-main #shipping_address_1_field, .um-account-main #shipping_address_2_field, .um-account-main #shipping_company_field, .um-account-main #shipping_country_field{ grid-column:1 / -1; } /* los campos en sí: que NUNCA se salgan */ .um-account-main .form-row input.input-text, .um-account-main .form-row textarea, .um-account-main .form-row select, .um-account-main .woocommerce-input-wrapper, .um-account-main .select2-container{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } .um-account-main .form-row label{ display:block; font-weight:700; color:var(--sl-ink,#28313a); margin:0 0 6px; font-size:14px; line-height:1.3; word-break:break-word; /* etiquetas largas no rompen la caja */ } .um-account-main .form-row input.input-text, .um-account-main .form-row select{ border:1px solid #e2d8c6 !important; border-radius:10px !important; background:#fffdf9 !important; padding:11px 14px !important; min-height:46px; box-shadow:none !important; } .um-account-main .form-row input.input-text:focus, .um-account-main .form-row select:focus{ border-color:var(--sl-teal,#00ab87) !important; box-shadow:0 0 0 3px rgba(0,171,135,.12) !important; } .um-account-main .woocommerce-billing-fields h3, .um-account-main .woocommerce-shipping-fields h3{ font-size:17px; font-weight:800; color:#2b2318; margin:0 0 16px; padding:0 0 12px; border-bottom:1px solid #f0e9db; } .um-account-main button[type=submit], .um-account-main .um-button{ border-radius:999px !important; font-weight:700; min-width:220px; } /* ── MÓVIL: una sola columna y nada de desbordes ── */ @media (max-width:767px){ .um-account-main .woocommerce-billing-fields__field-wrapper, .um-account-main .woocommerce-shipping-fields__field-wrapper, .um-account-main .woocommerce-address-fields__field-wrapper{ grid-template-columns:1fr; column-gap:0; } .um-account-main .form-row{ margin-bottom:14px !important; } .um-account-main button[type=submit], .um-account-main .um-button{ width:100%; min-width:0; } /* la propia caja de la cuenta */ .um-account .um-account-side, .um-account .um-account-main{ max-width:100%; box-sizing:border-box; } } /* ── 2026-07-14 · Página de gracias: arreglar los cortes feos de texto ── * Síntomas: «NÚMERO DE PEDIDO:» partido en 2 líneas, «Transferencia bancaria * directa» en 3, y el «€» del envío cayendo solo a la línea siguiente. * Causa: celdas demasiado estrechas + MAYÚSCULAS con letter-spacing (ocupan * mucho más) + palabras largas (el email) sin punto de corte. */ .woocommerce-order ul.woocommerce-order-overview{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) !important; } .woocommerce-order ul.woocommerce-order-overview li{ padding:16px 14px !important; font-size:10.5px !important; letter-spacing:.3px !important; line-height:1.35 !important; min-width:0; overflow-wrap:anywhere; /* el email largo parte por donde sea, sin salirse */ hyphens:auto; } .woocommerce-order ul.woocommerce-order-overview li strong{ margin-top:8px !important; font-size:15px !important; line-height:1.35 !important; overflow-wrap:anywhere; } /* el email es lo más largo: un pelín más pequeño para que quepa de una */ .woocommerce-order ul.woocommerce-order-overview li.email strong{ font-size:13px !important; font-weight:700 !important; } /* el método de pago no necesita ser tan grande */ .woocommerce-order ul.woocommerce-order-overview li.method strong{ font-size:13.5px !important; } /* ── tabla del pedido: que el «€» no se quede solo ── */ .woocommerce-order table.woocommerce-table--order-details td{ line-height:1.55 !important; overflow-wrap:anywhere; } .woocommerce-order table.woocommerce-table--order-details tfoot td{ text-align:right; } /* la fila de Envío trae el método completo detrás del precio: lo bajamos de tamaño y lo dejamos en un bloque propio, así no arrastra el símbolo del euro */ .woocommerce-order table.woocommerce-table--order-details tfoot .woocommerce-Price-amount{ white-space:nowrap; /* «9,95 €» nunca se parte */ font-weight:800; } .woocommerce-order table.woocommerce-table--order-details tfoot td small, .woocommerce-order table.woocommerce-table--order-details tfoot td .includes_tax, .woocommerce-order table.woocommerce-table--order-details tfoot td .tax_label{ display:inline; font-size:12px !important; color:#8a7c68 !important; font-weight:600; } /* «via 🚚 Envío 24/48h — gratis desde 300 €» -> línea propia, más discreta */ .woocommerce-order table.woocommerce-table--order-details tfoot tr td{ max-width:0; /* fuerza a la celda a respetar el ancho de la tabla */ width:60%; } .woocommerce-order table.woocommerce-table--order-details tfoot th{ white-space:nowrap; width:40%; } @media (max-width:767px){ .woocommerce-order ul.woocommerce-order-overview{ grid-template-columns:1fr 1fr !important; } .woocommerce-order ul.woocommerce-order-overview li{ border-right:1px solid #f3ece0 !important; border-bottom:1px solid #f3ece0 !important; } .woocommerce-order ul.woocommerce-order-overview li:nth-child(2n){ border-right:0 !important; } .woocommerce-order ul.woocommerce-order-overview li.email{ grid-column:1 / -1; border-right:0 !important; } .woocommerce-order table.woocommerce-table--order-details tfoot th{ white-space:normal; } } /* ── 2026-07-14 · Página de gracias en MÓVIL ── * En pantallas estrechas las 5 celdas del resumen (nº, fecha, email, total, * pago) apiladas como tarjetas ocupaban muchísimo y el texto salía partido. * Las convertimos en filas compactas: etiqueta a la izquierda, dato a la * derecha. Ocupa 1/3 y se lee de un vistazo. */ @media (max-width:640px){ .woocommerce-order{ max-width:100%; } .woocommerce-order ul.woocommerce-order-overview{ grid-template-columns:1fr !important; } .woocommerce-order ul.woocommerce-order-overview li{ display:flex !important; align-items:baseline; justify-content:space-between; gap:14px; text-align:left !important; padding:12px 14px !important; border-right:0 !important; border-bottom:1px solid #f3ece0 !important; font-size:10.5px !important; flex-wrap:nowrap; } .woocommerce-order ul.woocommerce-order-overview li:last-child{ border-bottom:0 !important; } .woocommerce-order ul.woocommerce-order-overview li strong{ margin-top:0 !important; text-align:right; font-size:13.5px !important; flex:1 1 auto; min-width:0; overflow-wrap:anywhere; } .woocommerce-order ul.woocommerce-order-overview li.email strong{ font-size:12px !important; } /* datos bancarios: una columna, IBAN en monoespaciada más pequeña */ .woocommerce-order ul.wc-bacs-bank-details{ grid-template-columns:1fr !important; gap:10px; } .woocommerce-order ul.wc-bacs-bank-details li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 12px; } .woocommerce-order ul.wc-bacs-bank-details li strong{ margin-top:0; text-align:right; font-size:13px; min-width:0; overflow-wrap:anywhere; } .woocommerce-order ul.wc-bacs-bank-details li.iban strong{ font-size:12px; } /* tabla del pedido */ .woocommerce-order table.woocommerce-table--order-details th, .woocommerce-order table.woocommerce-table--order-details td{ padding:11px 2px !important; font-size:13px; } .woocommerce-order table.woocommerce-table--order-details tfoot th{ width:auto; } .woocommerce-order table.woocommerce-table--order-details tfoot td{ width:auto; max-width:none; } /* títulos algo más pequeños para ganar espacio */ .woocommerce-order h2, .woocommerce-order .woocommerce-order-details__title, .woocommerce-order .wc-bacs-bank-details-heading{ font-size:16px !important; margin-bottom:12px !important; padding-bottom:10px !important; } } /* pantallas MUY estrechas (360 y menos): que nada empuje hacia fuera */ @media (max-width:380px){ .woocommerce-order ul.woocommerce-order-overview li{ font-size:10px !important; gap:10px; } .woocommerce-order ul.woocommerce-order-overview li strong{ font-size:12.5px !important; } .woocommerce-order ul.woocommerce-order-overview li.email strong{ font-size:11px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · «Mi cuenta» (Ultimate Member) con el estilo del resto del sitio * Antes: menú lateral gris plano, sin tarjetas, sin la paleta cálida. * ═════════════════════════════════════════════════════════════════════════ */ .um-account .um-form, .um-account{ max-width:1180px; margin-inline:auto; } /* ── columna izquierda: avatar + menú ── */ .um-account .um-account-side{ background:#fff; border:1px solid #ece3d2; border-radius:18px; box-shadow:0 6px 26px rgba(61,49,35,.06); padding:22px 16px; box-sizing:border-box; } .um-account .um-account-side .um-account-name a{ color:#2b2318 !important; font-weight:800; font-size:16px; } .um-account .um-account-side .um-account-profile-link a{ color:var(--sl-teal,#00ab87) !important; font-size:13px; font-weight:600; } .um-account .um-account-side ul{ margin-top:16px !important; } .um-account .um-account-side li{ margin:0 0 6px !important; border:0 !important; background:transparent !important; } .um-account .um-account-side li a{ display:flex !important; align-items:center; gap:10px; background:#faf6ef !important; border:1px solid #f0e9db !important; border-radius:12px !important; padding:12px 14px !important; color:#3d3123 !important; font-weight:600; font-size:14.5px; transition:background .15s ease, border-color .15s ease, color .15s ease; } .um-account .um-account-side li a:hover{ background:#fff !important; border-color:#ddd0b8 !important; } .um-account .um-account-side li.current a, .um-account .um-account-side li a.current{ background:var(--sl-teal,#00ab87) !important; border-color:var(--sl-teal,#00ab87) !important; color:#fff !important; font-weight:800; } .um-account .um-account-side li a i, .um-account .um-account-side li a .um-account-icon{ color:inherit !important; opacity:.9; } .um-account .um-account-side li a .um-account-arrow{ margin-left:auto; opacity:.55; } .um-account .um-account-side li.current a .um-account-arrow{ opacity:.9; } /* ── columna derecha: tarjeta ── */ .um-account .um-account-main{ background:#fff; border:1px solid #ece3d2; border-radius:18px; box-shadow:0 6px 26px rgba(61,49,35,.06); padding:26px 28px; box-sizing:border-box; } .um-account .um-account-heading{ display:flex; align-items:center; gap:10px; font-size:19px !important; font-weight:800 !important; color:#2b2318 !important; border-bottom:1px solid #f0e9db !important; padding:0 0 14px !important; margin:0 0 20px !important; } .um-account .um-account-heading i{ color:var(--sl-teal,#00ab87) !important; } /* ── el bloque de «subir ficheros» del Checkout Manager no pinta nada aquí ── */ .um-account .wooccm_order_attachments_wrapper, .um-account .wooccm_customer_attachments_wrapper, .um-account table.woocommerce_order_items, .um-account .order-upload{ display:none !important; } @media (max-width:767px){ .um-account .um-account-side, .um-account .um-account-main{ padding:18px 16px; border-radius:14px; } .um-account .um-account-side{ margin-bottom:16px; } } /* ── 2026-07-14 · CORRECCIÓN de mi propio CSS de Select2 ── * Lo puse con display:flex y eso rompió el posicionamiento de Select2, que * coloca la flecha y la «×» de limpiar en ABSOLUTO dentro del contenedor: * - el texto dejaba de estar centrado verticalmente * - la «×» se montaba encima de la flecha * Volvemos a block + line-height (como espera Select2) y dejamos hueco a la * derecha para los iconos. * * Y QUITAMOS la «×» de limpiar: si el cliente vacía «País», el campo * «Provincia» deja de ser un desplegable y se convierte en un cuadro de texto * suelto (UM lo genera a partir del país) -> el cliente se queda sin poder * elegir provincia. Vaciar el país no aporta nada; se cambia eligiendo otro. */ .select2-container--default .select2-selection--single, .select2-container .select2-selection--single{ display:block !important; position:relative; padding:0 !important; min-height:46px; height:46px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered{ display:block !important; line-height:46px !important; height:46px; padding:0 42px 0 14px !important; /* hueco a la derecha para la flecha */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#3d3123 !important; } .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:#a99c86 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow{ position:absolute !important; top:0 !important; inset-inline-end:10px !important; height:46px !important; width:20px !important; } /* fuera la «×» de limpiar (ver explicación arriba) */ .select2-container--default .select2-selection--single .select2-selection__clear, .select2-container .select2-selection__clear{ display:none !important; } @media (max-width:767px){ .select2-container--default .select2-selection--single, .select2-container .select2-selection--single{ min-height:48px; height:48px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:48px !important; height:48px; } .select2-container--default .select2-selection--single .select2-selection__arrow{ height:48px !important; } } /* ── 2026-07-14 · Cápsula: recuperar la fórmula «4 × 3,60 € = 14,38 €» ── * Al meter los botones −/+ me comí el «×» y el «=». El dueño los quiere: de un * vistazo se ve cantidad, precio unitario y total de la línea. */ .widget_shopping_cart .sl-mc-formula{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:5px; font-size:13px; line-height:1.5; } .widget_shopping_cart .sl-mc-cant{ font-weight:800; color:#3d3123; } .widget_shopping_cart .sl-mc-x, .widget_shopping_cart .sl-mc-igual{ color:#a99c86; font-weight:600; } .widget_shopping_cart .sl-mc-precio{ color:#8a7c68; } .widget_shopping_cart .sl-mc-precio .amount{ color:inherit; } .widget_shopping_cart .sl-line-total{ color:#3d3123; font-weight:800; font-size:14px; } .widget_shopping_cart .sl-line-total .amount{ color:inherit; } /* ── 2026-07-14 · Fuera el enlace «Ver el perfil» de Mi cuenta ── * El perfil de UM (/usuario/{ID}/) es una página tipo red social (avatar, bio, * actividad). En una tienda B2B no sirve de nada: el cliente quiere «Mis * pedidos» y «Mis direcciones», no un perfil público. Además enseñaba el nombre * y la empresa del cliente, y ha sido el destino de varios de los fallos de hoy * (a los clientes exentos se les echaba ahí; el logout se quedaba atascado ahí). * Dejamos UNA sola puerta de entrada a la cuenta: /cuenta/ */ /* CORRECCIÓN 2026-07-14: este selector NO estaba acotado y se cargaba también el nombre de la CABECERA DE MÓVIL (que también enlaza a /usuario/…) -> en el móvil salía el avatar y debajo un hueco blanco enorme sin nombre. Lo que queríamos era quitar el ENLACE al perfil, no el NOMBRE. */ .um-account .um-account-profile-link{ display:none !important; } .um-account .um-account-name{ display:block !important; } .um-account .um-account-name a{ display:inline !important; color:#2b2318 !important; text-decoration:none !important; pointer-events:none; /* se ve, pero ya no lleva al perfil */ cursor:default; } .um-account .um-account-meta-img a{ pointer-events:none; cursor:default; } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · «Mi cuenta»: MISMO diseño que el formulario de registro * (petición del dueño: «hazlo como el registro, así queda uniforme»). * Escritorio 2 columnas · móvil 1 columna · selects NATIVOS (sin Select2, que * en esta página se posicionaba mal y dejaba el desplegable bajo el pie). * ═════════════════════════════════════════════════════════════════════════ */ /* la caja de la cuenta, como la tarjeta del registro */ .um-account .um-account-main{ max-width:none; padding:28px 30px; } /* rejilla de 2 columnas, igual que el registro */ @media (min-width:768px){ .um-account-main .woocommerce-billing-fields__field-wrapper, .um-account-main .woocommerce-shipping-fields__field-wrapper, .um-account-main .woocommerce-address-fields__field-wrapper, .um-account-main form > .woocommerce-billing-fields, .um-account-main form > .woocommerce-shipping-fields{ display:grid; grid-template-columns:1fr 1fr; column-gap:22px; row-gap:0; align-items:stretch; } /* nombre y apellidos comparten fila; el resto va a lo ancho */ .um-account-main #billing_first_name_field, .um-account-main #billing_last_name_field, .um-account-main #shipping_first_name_field, .um-account-main #shipping_last_name_field, .um-account-main #billing_postcode_field, .um-account-main #billing_city_field, .um-account-main #shipping_postcode_field, .um-account-main #shipping_city_field, .um-account-main #billing_state_field, .um-account-main #billing_country_field, .um-account-main #shipping_state_field, .um-account-main #shipping_country_field, .um-account-main #billing_phone_field, .um-account-main #billing_email_field{ grid-column:auto; } /* estos sí a fila completa (textos largos) */ .um-account-main #billing_company_field, .um-account-main #billing_nif_field, .um-account-main #billing_address_1_field, .um-account-main #billing_address_2_field, .um-account-main #shipping_company_field, .um-account-main #shipping_address_1_field, .um-account-main #shipping_address_2_field{ grid-column:1 / -1; } /* que los inputs de una misma fila queden alineados abajo (etiquetas de distinto alto no descuadran la fila) — mismo truco que en el registro */ .um-account-main .form-row{ display:flex !important; flex-direction:column; } .um-account-main .form-row .woocommerce-input-wrapper{ margin-top:auto; } } /* campos: idénticos a los del registro */ .um-account-main .form-row label{ font-weight:700; color:var(--sl-ink,#28313a); font-size:14px; margin:0 0 6px; display:block; line-height:1.3; } .um-account-main .form-row label .required{ color:#e0752d; } .um-account-main .form-row .optional{ color:#a99c86; font-weight:400; font-size:12px; } .um-account-main .form-row input.input-text, .um-account-main .form-row select, .um-account-main .form-row textarea{ width:100% !important; box-sizing:border-box; border:1px solid #e2d8c6 !important; border-radius:10px !important; background:#fffdf9 !important; padding:11px 14px !important; min-height:46px; font-size:14px; box-shadow:none !important; appearance:auto; /* select nativo, con su flechita del sistema */ } .um-account-main .form-row select{ padding-right:34px !important; cursor:pointer; } .um-account-main .form-row input.input-text:focus, .um-account-main .form-row select:focus{ border-color:var(--sl-teal,#00ab87) !important; box-shadow:0 0 0 3px rgba(0,171,135,.12) !important; outline:none; } /* CORRECCIÓN 2026-07-14: esta regla era PELIGROSA. Si Select2 se cargaba (y se cargaba, porque la condición `is_page()` con la que lo apagábamos NUNCA se cumplía en /cuenta/billing/), Select2 pone el nativo se vea, pase lo que pase. */ .um-account .form-row select, .um-account .form-row select.country_select, .um-account .form-row select.state_select{ display:block !important; visibility:visible !important; opacity:1 !important; height:auto !important; width:100% !important; position:static !important; } /* si por lo que sea Select2 llegara a crearse, que al menos se vea bien */ .um-account .select2-container{ width:100% !important; } /* botón guardar, como el del registro */ .um-account-main button[type=submit], .um-account-main input[type=submit], .um-account-main .um-button{ border-radius:999px !important; font-weight:700 !important; min-width:240px; min-height:46px; margin-top:6px; } /* ── MÓVIL: una columna, compacto ── */ @media (max-width:767px){ .um-account .um-account-side{ padding:16px 12px; margin-bottom:14px; } .um-account .um-account-main{ padding:18px 14px; } .um-account-main .form-row{ margin-bottom:14px !important; } .um-account-main button[type=submit], .um-account-main input[type=submit], .um-account-main .um-button{ width:100%; min-width:0; } /* el menú lateral en móvil: filas compactas, no tarjetas gigantes */ .um-account .um-account-side li a{ padding:11px 12px !important; font-size:14px; } .um-account .um-account-side .um-account-meta-img{ width:84px; height:84px; margin-inline:auto; } } /* «Cerrar sesión» en el menú (móvil y escritorio) */ .sl-menu-salir > a{ color:#c0392b !important; font-weight:700; } .sl-menu-salir > a:hover{ color:#e74c3c !important; } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · «Mi cuenta» en MÓVIL — rehecho * * POR QUÉ ESTABA FEO: Ultimate Member tiene SU PROPIO sistema responsive * (clases `uimob340-*`, `uimob500-*`, `uimob800-*`) que un JS suyo va poniendo * según el ANCHO DEL FORMULARIO. Dentro de Woodmart eso no se aplica bien: * - se veían A LA VEZ la cabecera de móvil (.um-account-meta.uimob340-show) * y la columna de escritorio (.um-account-side) * - los títulos que UM quiere ocultar (.um-account-title.uimob800-hide) se * quedaban visibles, y los iconos salían duplicados (icon + icontip) * Resultado: avatar gigante, tarjeta blanca vacía y menú desangelado. * * En vez de pelearnos con su JS, tomamos el control del móvil por CSS. * Revertir = borrar este bloque. * ═════════════════════════════════════════════════════════════════════════ */ @media (max-width:767px){ /* la caja: una sola tarjeta, sin dobles bordes */ .um-account .um-form, .um-account form{ padding:0 !important; } /* fuera la cabecera duplicada de UM (nos quedamos con la de la columna) */ .um-account > .um-form > form > .um-account-meta{ display:none !important; } /* la columna SÍ se ve (UM la esconde por su cuenta) */ .um-account .um-account-side{ display:block !important; float:none !important; width:100% !important; margin:0 0 16px !important; padding:18px 14px !important; background:#fff; border:1px solid #ece3d2; border-radius:16px; box-shadow:0 6px 26px rgba(61,49,35,.06); box-sizing:border-box; } /* avatar más pequeño y con el nombre debajo */ .um-account .um-account-side .um-account-meta{ display:block !important; text-align:center; margin-bottom:16px; } .um-account .um-account-side .um-account-meta-img, .um-account .um-account-side .um-account-meta-img-b{ display:block !important; width:76px !important; height:76px !important; margin:0 auto 10px !important; } .um-account .um-account-side .um-account-meta-img img, .um-account .um-account-side .um-account-meta-img-b img{ width:76px !important; height:76px !important; border-radius:50%; } .um-account .um-account-side .um-account-name{ display:block !important; font-size:15px; font-weight:800; color:#2b2318; margin:0; } .um-account .um-account-side .um-account-name a{ color:#2b2318 !important; } /* el menú: filas compactas, iconos a la izquierda, título SIEMPRE visible */ .um-account .um-account-side ul{ margin:0 !important; padding:0 !important; list-style:none !important; } .um-account .um-account-side li{ margin:0 0 8px !important; border:0 !important; background:none !important; } .um-account .um-account-side li a.um-account-link{ display:flex !important; align-items:center; gap:12px; padding:13px 14px !important; background:#faf6ef !important; border:1px solid #f0e9db !important; border-radius:12px !important; color:#3d3123 !important; font-weight:600; font-size:14.5px; text-decoration:none; } .um-account .um-account-side li a.um-account-link.current{ background:var(--sl-teal,#00ab87) !important; border-color:var(--sl-teal,#00ab87) !important; color:#fff !important; font-weight:800; } /* UM pinta el icono DOS veces (icontip para móvil + icon para escritorio): nos quedamos con uno solo */ .um-account .um-account-side .um-account-icontip{ display:none !important; } .um-account .um-account-side .um-account-icon{ display:inline-flex !important; align-items:center; justify-content:center; width:22px; flex:0 0 22px; color:inherit !important; } .um-account .um-account-side .um-account-icon i{ color:inherit !important; font-size:16px; } /* el título lo esconde UM en móvil (uimob800-hide) -> lo devolvemos */ .um-account .um-account-side .um-account-title{ display:inline !important; flex:1 1 auto; min-width:0; color:inherit !important; } .um-account .um-account-side .um-account-arrow{ display:inline-flex !important; margin-left:auto; opacity:.5; color:inherit !important; } .um-account .um-account-side li a.um-account-link.current .um-account-arrow{ opacity:.9; } /* el contenido, tarjeta aparte debajo */ .um-account .um-account-main{ display:block !important; float:none !important; width:100% !important; margin:0 !important; padding:20px 16px !important; background:#fff; border:1px solid #ece3d2; border-radius:16px; box-shadow:0 6px 26px rgba(61,49,35,.06); box-sizing:border-box; min-height:0; } .um-account .um-account-heading{ font-size:17px !important; margin:0 0 16px !important; padding:0 0 12px !important; } /* el enlace al perfil ya no existe (lo quitamos), por si acaso */ .um-account .um-account-profile-link{ display:none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 (CORRECCIÓN) · «Mi cuenta» en MÓVIL — ahora SÍ, siguiendo el * diseño que UM ya trae. * * MI ERROR ANTERIOR: forcé a que se viera `.um-account-side` (la columna de * ESCRITORIO) -> salían DOS avatares y DOS menús, porque UM ya trae su propia * versión para móvil. * * Estructura real de UM (sacada renderizando el shortcode en el servidor): * .um-account-meta <- cabecera de MÓVIL (avatar + nombre) * .um-account-side <- columna de ESCRITORIO (avatar + menú) ← sobra en móvil * .um-account-main * .um-account-nav <- cabecera del ACORDEÓN (una antes de cada pestaña) = el menú de móvil * .um-account-tab <- contenido de la pestaña * .um-account-heading <- título, solo para ESCRITORIO * * En móvil: nos quedamos con `.um-account-meta` + el ACORDEÓN, y escondemos la * columna de escritorio. Tocar una fila despliega su formulario debajo: es lo * más cómodo en un móvil. * ═════════════════════════════════════════════════════════════════════════ */ @media (max-width:767px){ /* ── 1) fuera la columna de escritorio (era la que duplicaba todo) ── */ .um-account .um-account-side{ display:none !important; } /* ── 2) cabecera: UN avatar y el nombre ── */ .um-account > .um-form > form > .um-account-meta{ display:block !important; text-align:center; background:#fff; border:1px solid #ece3d2; border-radius:16px; box-shadow:0 6px 26px rgba(61,49,35,.06); padding:20px 16px 16px; margin:0 0 14px; } .um-account > .um-form > form > .um-account-meta .um-account-meta-img{ width:76px !important; height:76px !important; margin:0 auto 10px !important; } .um-account > .um-form > form > .um-account-meta .um-account-meta-img img{ width:76px !important; height:76px !important; border-radius:50%; } .um-account > .um-form > form > .um-account-meta .um-account-name{ font-size:15px; font-weight:800; color:#2b2318; margin:0; } .um-account > .um-form > form > .um-account-meta .um-account-name a{ color:#2b2318 !important; } .um-account .um-account-profile-link{ display:none !important; } /* el perfil ya no se usa */ /* ── 3) el ACORDEÓN de UM = el menú de móvil ── */ .um-account .um-account-main{ display:block !important; float:none !important; width:100% !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .um-account .um-account-nav{ display:block !important; margin:0 0 8px !important; } .um-account .um-account-nav a{ display:flex !important; align-items:center; gap:12px; padding:14px 16px !important; background:#fff !important; border:1px solid #ece3d2 !important; border-radius:12px !important; color:#3d3123 !important; font-weight:700; font-size:15px; text-decoration:none !important; box-shadow:0 4px 16px rgba(61,49,35,.05); } .um-account .um-account-nav a.current, .um-account .um-account-nav.current a{ background:var(--sl-teal,#00ab87) !important; border-color:var(--sl-teal,#00ab87) !important; color:#fff !important; } .um-account .um-account-nav i{ color:inherit !important; } /* NADA de ::after aquí: UM ya trae su propia flecha (). Al añadir la mía salían DOS flechas (⌄⌄). */ /* ── 4) el contenido de cada pestaña, tarjeta debajo ── */ .um-account .um-account-tab{ background:#fff; border:1px solid #ece3d2; border-radius:16px; box-shadow:0 6px 26px rgba(61,49,35,.06); padding:18px 14px !important; margin:0 0 14px !important; box-sizing:border-box; } .um-account .um-account-heading{ display:none !important; } /* el título es solo de escritorio */ .um-account .um-account-tab .form-row{ margin-bottom:14px !important; } .um-account .um-account-tab button[type=submit], .um-account .um-account-tab input[type=submit], .um-account .um-account-tab .um-button{ width:100%; min-width:0; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 (DEFINITIVO) · Acordeón de «Mi cuenta» en MÓVIL * * HTML REAL de UM (sacado renderizando el shortcode en el servidor, ya no * adivinando): * * * * Mis tres errores anteriores: * - puse `display:flex` -> el `float:left` con el que UM coloca el icono deja * de funcionar, y como el texto va PRIMERO en el HTML, el orden se descolocó * y el `gap` no hacía nada -> «👤Cuenta» pegado * - añadí una flecha con ::after -> salían DOS (⌄⌄) * - escondí `.um-account-name a[href*="/usuario/"]` sin acotar -> me cargué * también el nombre de la cabecera del móvil * * Ahora: flex + `order:-1` en el icono (para que vaya delante aunque en el HTML * vaya detrás) + la flecha de UM a la derecha. Sin inventos. * ═════════════════════════════════════════════════════════════════════════ */ @media (max-width:767px){ .um-account .um-account-nav a{ display:flex !important; align-items:center; gap:12px; padding:14px 16px !important; background:#fff !important; border:1px solid #ece3d2 !important; border-radius:12px !important; color:#3d3123 !important; font-weight:700; font-size:15px; line-height:1.3; text-decoration:none !important; box-shadow:0 4px 16px rgba(61,49,35,.05); } /* el icono va DESPUÉS en el HTML: lo traemos delante con order */ .um-account .um-account-nav a .ico{ order:-1; float:none !important; flex:0 0 22px; width:22px; display:inline-flex !important; align-items:center; justify-content:center; margin:0 !important; color:inherit !important; } .um-account .um-account-nav a .ico i{ color:inherit !important; font-size:16px; } /* la flecha (la de UM) a la derecha del todo */ .um-account .um-account-nav a .arr{ float:none !important; margin-left:auto; display:inline-flex !important; align-items:center; opacity:.5; color:inherit !important; } .um-account .um-account-nav a .arr i{ color:inherit !important; } /* pestaña abierta */ .um-account .um-account-nav a.current{ background:var(--sl-teal,#00ab87) !important; border-color:var(--sl-teal,#00ab87) !important; color:#fff !important; } .um-account .um-account-nav a.current .arr{ opacity:.9; } /* la cabecera: avatar + nombre (ya no se lo come nadie) */ .um-account > .um-form > form > .um-account-meta{ padding:22px 16px 18px !important; } .um-account > .um-form > form > .um-account-meta .um-account-name{ display:block !important; font-size:15px; font-weight:800; color:#2b2318; margin:10px 0 0; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 (ESTA VEZ SÍ) · Acordeón de «Mi cuenta» en móvil * * Leído el CSS del propio plugin (ultimate-member/assets/css/um-account.css): * * .um-account-nav a { display:block; position:relative; * height:44px; line-height:44px; padding-left:40px; * color:#666 !important; border-bottom:1px solid #eee !important; } * .um-account-nav span.ico { position:absolute; left:0; top:0; width:21px; } ← ¡ABSOLUTO! * .um-account-nav span.arr { position:absolute; right:0; top:1px; } ← ¡ABSOLUTO! * * MI ERROR: le puse `display:flex`. Los hijos ABSOLUTOS no se enteran de flex — * siguen clavados en left:0 / top:0 del . Y como además le puse padding, el * icono se salía por la esquina superior izquierda de la píldora. Ni `order` ni * `gap` podían hacer nada. * * SOLUCIÓN: no pelearse. Mantener `display:block` + `position:relative` (que es * lo que UM espera) y simplemente RECOLOCAR los dos absolutos: centrados * verticalmente y metidos hacia dentro. Reservamos el hueco con el padding. * ═════════════════════════════════════════════════════════════════════════ */ @media (max-width:767px){ .um-account .um-account-nav{ margin:0 0 8px !important; } .um-account .um-account-nav a{ display:block !important; /* NADA de flex: los hijos son absolutos */ position:relative !important; height:auto !important; min-height:54px; line-height:1.35 !important; /* hueco: izquierda para el icono, derecha para la flecha */ padding:17px 46px 17px 52px !important; background:#fff !important; border:1px solid #ece3d2 !important; border-bottom:1px solid #ece3d2 !important; /* UM lo pone con !important */ border-radius:12px !important; color:#3d3123 !important; /* UM lo pone con !important */ font-weight:700 !important; font-size:15px !important; text-decoration:none !important; box-shadow:0 4px 16px rgba(61,49,35,.05); box-sizing:border-box; transition:background .15s ease, border-color .15s ease, color .15s ease; } /* el icono: absoluto, pero centrado y metido hacia dentro */ .um-account .um-account-nav a span.ico{ position:absolute !important; left:16px !important; top:50% !important; transform:translateY(-50%); width:22px !important; height:22px; display:flex !important; align-items:center; justify-content:center; font-size:17px !important; line-height:1 !important; color:inherit !important; text-align:center; } .um-account .um-account-nav a span.ico i{ color:inherit !important; font-size:17px !important; line-height:1 !important; } /* la flecha: absoluta, centrada, a la derecha */ .um-account .um-account-nav a span.arr{ position:absolute !important; right:14px !important; top:50% !important; left:auto !important; transform:translateY(-50%); font-size:20px !important; line-height:1 !important; opacity:.45; color:inherit !important; display:flex !important; align-items:center; } .um-account .um-account-nav a span.arr i{ color:inherit !important; line-height:1 !important; } /* pestaña abierta */ .um-account .um-account-nav a.current{ background:var(--sl-teal,#00ab87) !important; border-color:var(--sl-teal,#00ab87) !important; color:#fff !important; } .um-account .um-account-nav a.current span.arr{ opacity:.95; } .um-account .um-account-nav a:not(.current):hover{ border-color:#ddd0b8 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 (LA BUENA) · Los de provincia lo esconde EL PROPIO CSS DE UM: * um-styles.min.css :: .um-s1, .um-s2 { display:none } * - El

    • * * * POR ESO todo lo que escribí hoy apuntando a `.form-row` y a * `#billing_country_field` NO HACÍA ABSOLUTAMENTE NADA: apuntaba a algo que * el plugin borra. * * Y quien esconde el (país / provincia): que se VEAN, pese a UM ── */ .um-account .um-field-area select, .um-account select.um-s1, .um-account select.um-s2, .um-account select[name^="billing_"], .um-account select[name^="shipping_"]{ display:block !important; visibility:visible !important; opacity:1 !important; position:static !important; width:100% !important; min-width:100% !important; max-width:100% !important; height:auto !important; min-height:46px; box-sizing:border-box; border:1px solid #e2d8c6 !important; border-radius:10px !important; background:#fffdf9 !important; padding:11px 34px 11px 14px !important; font-size:14px; color:#3d3123; appearance:auto; cursor:pointer; } /* ── los del mismo formulario, con el mismo estilo ── */ .um-account .um-field-area input[type=text], .um-account .um-field-area input[type=tel], .um-account .um-field-area input[type=email], .um-account .um-field-area input[type=password], .um-account .um-field-area input.input-text{ display:block !important; width:100% !important; box-sizing:border-box; border:1px solid #e2d8c6 !important; border-radius:10px !important; background:#fffdf9 !important; padding:11px 14px !important; min-height:46px; font-size:14px; box-shadow:none !important; } .um-account .um-field-area input:focus, .um-account .um-field-area select:focus{ border-color:var(--sl-teal,#00ab87) !important; box-shadow:0 0 0 3px rgba(0,171,135,.12) !important; outline:none; } .um-account .um-field-area input[disabled]{ background:#f4efe6 !important; color:#8a7c68 !important; cursor:not-allowed; } /* ── ESCRITORIO: 2 columnas, como el registro (estructura REAL: .um-field) ── */ @media (min-width:768px){ .um-account .um-woo-form{ display:grid; grid-template-columns:1fr 1fr; column-gap:22px; row-gap:0; align-items:start; } .um-account .um-woo-form > .um-field{ min-width:0; } /* a fila completa los largos */ .um-account .um-field-billing_company, .um-account .um-field-billing_nif, .um-account .um-field-billing_address_1, .um-account .um-field-billing_address_2, .um-account .um-field-billing_email, .um-account .um-field-shipping_company, .um-account .um-field-shipping_address_1, .um-account .um-field-shipping_address_2, .um-account .um-field-shipping_email, .um-account .um-woo-form > .woocommerce-notices-wrapper, .um-account .um-woo-form > .um-col-alt, .um-account .um-woo-form > p, .um-account .um-woo-form > button, .um-account .um-woo-form > input[type=submit]{ grid-column:1 / -1; } } @media (max-width:767px){ .um-account .um-woo-form{ display:block; } } /* el botón de guardar */ .um-account .um-woo-form button[type=submit], .um-account .um-woo-form input[type=submit], .um-account .um-woo-form .um-button{ border-radius:999px !important; font-weight:700 !important; min-height:46px; min-width:230px; margin-top:8px; } @media (max-width:767px){ .um-account .um-woo-form button[type=submit], .um-account .um-woo-form input[type=submit], .um-account .um-woo-form .um-button{ width:100%; min-width:0; } } /* ═════════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Tabla de «adjuntos del cliente» de WOOCCM colándose en Mi cuenta. * * WOOCCM se engancha a `woocommerce_after_edit_address_form_{billing|shipping}` * y pinta ahí una tabla de adjuntos (columnas: Campo / Archivo / Nombre de * archivo / Dimensiones / Extensión / Acciones) que SIEMPRE sale vacía, porque * no tenemos ningún campo de subida configurado (`wooccm_additional` = vacío). * Es un cacharro de administración asomando al escaparate. Fuera. * ═════════════════════════════════════════════════════════════════════════════ */ .um-account .wooccm_customer_attachments_wrapper{ display:none !important; } /* ═════════════════════════════════════════════════════════════════════════════ * 2026-07-14 · «Mis pedidos»: tabla + ventana de detalle del pedido. * * ESTRUCTURA REAL (leída del plugin, no adivinada): * um-woocommerce/templates/orders.php -> .um-woo-orders table.my_account_orders * um-woocommerce/templates/order-popup.php -> se inyecta en la ventana de UM * ultimate-member/assets/js/um-functions.js -> crea
    * y
    en * um-woocommerce/assets/js/um-woocommerce.js -> le añade la clase .um-popup-order * dentro del cuerpo: do_action('woocommerce_view_order') -> plantillas nativas de * WooCommerce (.woocommerce-order-details, .woocommerce-customer-details, …) * ═════════════════════════════════════════════════════════════════════════════ */ /* ── 1. La tabla de pedidos ── */ .um-account .um-woo-orders table.my_account_orders{ width:100%; border-collapse:separate; border-spacing:0; margin:0; background:transparent; border:0; } .um-account .um-woo-orders table.my_account_orders thead th{ background:transparent; border:0; border-bottom:2px solid #ece8e1; padding:0 14px 10px; text-align:left; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9a938a; white-space:nowrap; } .um-account .um-woo-orders table.my_account_orders tbody td{ background:transparent; border:0; border-bottom:1px solid #f1eee9; padding:16px 14px; vertical-align:middle; font-size:15px; color:var(--sl-ink,#28313a); } .um-account .um-woo-orders table.my_account_orders tbody tr:last-child td{ border-bottom:0; } .um-account .um-woo-orders table.my_account_orders tbody tr:hover td{ background:#faf8f5; } .um-account .um-woo-orders .order-total{ font-weight:800; color:#e8833a; white-space:nowrap; } .um-account .um-woo-orders .order-actions, .um-account .um-woo-orders .order-detail{ text-align:left; white-space:nowrap; } /* etiqueta de estado */ .um-account .um-woo-orders .um-woo-status{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.5; background:#f0ede8; color:#6c6459; border:1px solid #e4dfd7; } .um-account .um-woo-orders .um-woo-status.completed{ background:#e3f5ef; color:#00795f; border-color:#c2e9dd; } .um-account .um-woo-orders .um-woo-status.processing{ background:#e6f1fb; color:#1c5f9e; border-color:#c9e0f5; } .um-account .um-woo-orders .um-woo-status.cancelled, .um-account .um-woo-orders .um-woo-status.failed, .um-account .um-woo-orders .um-woo-status.refunded{ background:#fdeceb; color:#a52a20; border-color:#f6d3d0; } /* El ojo (.um-woo-view-order) y el botón «Ver» hacen EXACTAMENTE lo mismo: los dos abren la misma ventana por AJAX. Escondemos el ojo (la celda se queda, porque ahí es donde el plugin de facturas engancha el enlace del PDF) y dejamos un solo botón. */ .um-account .um-woo-orders td.order-detail a.um-woo-view-order{ display:none !important; } /* ⚠️ EL AZUL LO PONE EL PLUGIN um-woocommerce.min.css: * .um-account .um-woo-form.woocommerce .button{ background:#3ba1da!important; border-radius:4px!important } * Esa regla es 0,4,0 + !important y se carga DESPUÉS que este style.css. Empatar especificidad * NO basta (ganaría el plugin por orden). Por eso añadimos `a` + la cadena completa * .um-account .um-woo-orders .order-actions a.button.X → 0,5,1 (SUPERA al plugin, gana siempre). */ /* base de los dos botones: redondeados, cómodos y separados */ .um-account .um-woo-orders .order-actions a.button{ display:inline-flex !important; align-items:center; justify-content:center; min-height:36px; padding:0 18px !important; border:0 !important; border-radius:8px !important; /* esquinas redondeadas (el plugin ponía 4px) */ margin:4px 0 4px 10px !important; /* 10px de separación entre Ver y Factura */ font-size:14px; font-weight:700; text-decoration:none; box-shadow:none; transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; } /* Ver → verde marca en contorno (acción secundaria) */ .um-account .um-woo-orders .order-actions a.button.view{ background:transparent !important; color:var(--sl-brand,#00ab87) !important; box-shadow:inset 0 0 0 2px var(--sl-brand,#00ab87) !important; } .um-account .um-woo-orders .order-actions a.button.view:hover{ background:var(--sl-brand,#00ab87) !important; color:#fff !important; } /* Factura → naranja sólido (descarga = color de acción, igual que el play del vídeo) */ .um-account .um-woo-orders .order-actions a.button.invoice{ background:var(--sl-orange,#f59a57) !important; color:#fff !important; } .um-account .um-woo-orders .order-actions a.button.invoice:hover{ background:#ef8a3c !important; color:#fff !important; } /* móvil: la tabla se convierte en fichas */ @media (max-width:600px){ .um-account .um-woo-orders table.my_account_orders thead{ display:none; } .um-account .um-woo-orders table.my_account_orders tbody tr{ display:block; background:#fff; border:1px solid #ece8e1; border-radius:14px; padding:6px 4px; margin:0 0 12px; } .um-account .um-woo-orders table.my_account_orders tbody td{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f5f2ee; padding:11px 14px; text-align:right; } .um-account .um-woo-orders table.my_account_orders tbody td::before{ content:attr(data-title); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#9a938a; text-align:left; margin-right:12px; } .um-account .um-woo-orders table.my_account_orders tbody td.order-detail::before, .um-account .um-woo-orders table.my_account_orders tbody td.order-actions::before{ content:none; } .um-account .um-woo-orders table.my_account_orders tbody td.order-actions{ flex-direction:column; align-items:stretch; gap:8px; } /* móvil: Ver + Factura a lo ancho, apilados y bien separados (a.button gana al plugin) */ .um-account .um-woo-orders .order-actions a.button{ width:100%; margin:0 !important; min-height:44px; } } /* ── 2. La ventana del detalle del pedido ── */ .um-popup-overlay{ background:rgba(30,26,22,.55) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } /* OJO con dos cosas de UM (leídas en su código, no supuestas): * a) um-modal.css: .um-popup{ width:500px; margin-left:-250px; left:50%; top:10% } * -> si le cambias el ancho y NO le quitas ese margin-left, la ventana se va * 250px a la izquierda. Es lo que pasaba. * b) um-functions.js :: responsive_Modal(): * ag_height = alto_ventana - cabecera - pie - 80; * if (ag_height > 350) ag_height = 350; <- TOPE DURO * $('.um-popup-autogrow2').css({'max-height': ag_height+'px'}); * -> se lo pone como estilo EN LÍNEA, así que una regla normal no puede con * él. Por eso el contenido salía metido en una cajita de 350px con su * propio scroll y debajo quedaba un pegote blanco. Hace falta !important. * * Solución: la ventana es una columna flex, sin alto fijo. Crece con lo que hay * dentro y solo hace scroll si de verdad no cabe en la pantalla. Así no puede * volver a aparecer hueco en blanco. */ .um-popup.um-popup-order{ width:min(860px, calc(100% - 32px)) !important; max-width:none !important; left:50% !important; margin-left:0 !important; transform:translateX(-50%) !important; top:5vh !important; height:auto !important; max-height:90vh !important; display:flex !important; flex-direction:column !important; border-radius:18px !important; overflow:hidden !important; background:#fff !important; border:0 !important; box-shadow:0 24px 70px rgba(20,16,12,.28) !important; } /* cabecera */ .um-popup-order .um-woo-order-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px !important; margin:0 !important; background:var(--sl-brand,#00ab87) !important; border:0 !important; } .um-popup-order .um-woo-customer{ display:flex; align-items:center; gap:10px; float:none !important; font-weight:800; font-size:15px; color:#fff !important; } .um-popup-order .um-woo-customer img{ border-radius:50%; width:34px; height:34px; } .um-popup-order .um-woo-orderid{ display:flex; align-items:center; gap:12px; float:none !important; font-weight:800; font-size:15px; color:#fff !important; } .um-popup-order .um-woo-order-hide{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff !important; text-decoration:none; transition:background .18s ease; } .um-popup-order .um-woo-order-hide:hover{ background:rgba(255,255,255,.34); } .um-popup-order .um-clear{ display:none; } /* cuerpo */ .um-popup-order .um-woo-order-body{ padding:24px 26px 28px !important; /* !important -> gana al estilo en línea de 350px que le pone UM por JS */ max-height:none !important; height:auto !important; flex:1 1 auto; min-height:0; overflow-y:auto; background:#fff; color:var(--sl-ink,#28313a); } .um-popup-order .um-woo-order-head{ flex:0 0 auto; } .um-popup-order .um-popup-footer{ display:none !important; } /* «El pedido #… se realizó el … y actualmente está …» */ .um-popup-order p.order-info{ background:#faf8f5; border:1px solid #ece8e1; border-radius:12px; padding:13px 16px; margin:0 0 22px; font-size:14.5px; line-height:1.6; } .um-popup-order p.order-info mark{ background:transparent; color:var(--sl-ink,#28313a); font-weight:800; padding:0; } .um-popup-order p.order-info mark.order-status{ color:var(--sl-brand,#00ab87); } .um-popup-order h2, .um-popup-order .woocommerce-column__title{ font-size:16px !important; font-weight:800 !important; color:var(--sl-ink,#28313a) !important; margin:0 0 12px !important; padding:0 0 9px !important; border-bottom:2px solid #ece8e1; } /* tabla de artículos */ .um-popup-order .woocommerce-table--order-details{ width:100%; border-collapse:separate; border-spacing:0; margin:0 0 26px; border:0; } .um-popup-order .woocommerce-table--order-details th, .um-popup-order .woocommerce-table--order-details td{ border:0; border-bottom:1px solid #f1eee9; padding:11px 4px; font-size:14.5px; background:transparent; } .um-popup-order .woocommerce-table--order-details thead th{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9a938a; border-bottom:2px solid #ece8e1; } .um-popup-order .woocommerce-table--order-details td.product-total, .um-popup-order .woocommerce-table--order-details th.product-total, .um-popup-order .woocommerce-table--order-details tfoot td{ text-align:right; } .um-popup-order .woocommerce-table--order-details .product-total bdi, .um-popup-order .woocommerce-table--order-details tfoot bdi{ color:#e8833a; font-weight:700; } .um-popup-order .woocommerce-table--order-details tfoot th{ text-align:left; font-weight:700; color:#6c6459; text-transform:none; letter-spacing:0; font-size:14.5px; } .um-popup-order .woocommerce-table--order-details tfoot tr:last-child th, .um-popup-order .woocommerce-table--order-details tfoot tr:last-child td{ border-bottom:0; border-top:2px solid #ece8e1; padding-top:14px; font-size:17px; font-weight:800; } .um-popup-order .woocommerce-table--order-details tfoot tr:last-child bdi{ font-size:19px; } /* las dos direcciones, en dos columnas */ .um-popup-order .woocommerce-customer-details .woocommerce-columns--addresses{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0; } .um-popup-order .woocommerce-customer-details .woocommerce-column{ width:auto !important; float:none !important; margin:0 !important; background:#faf8f5; border:1px solid #ece8e1; border-radius:14px; padding:16px 18px; } .um-popup-order .woocommerce-customer-details address{ font-style:normal !important; border:0 !important; padding:0 !important; margin:0 !important; font-size:14.5px; line-height:1.75; color:#4d4740; } @media (max-width:640px){ .um-popup-order .woocommerce-customer-details .woocommerce-columns--addresses{ grid-template-columns:1fr; } .um-popup-order .um-woo-order-body{ padding:18px 16px 22px !important; } .um-popup-order .um-woo-order-head{ padding:13px 15px !important; } .um-popup-order .um-woo-customer span{ display:none; } /* solo el avatar, no cabe */ } @media (max-width:600px){ .um-popup.um-popup-order{ width:calc(100% - 20px) !important; margin-left:0 !important; left:50% !important; transform:translateX(-50%) !important; top:10px !important; max-height:95vh !important; } } /* ═════════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Auditoría móvil: la barra de cookies TAPABA la barra inferior. * * COMPROBADO (puppeteer, iPhone 390px, cookie sin aceptar): * #cookie-notice z-index:100000 alto 263px (top 581 → 844) * .wd-toolbar (inferior) z-index:350 top 789 * elementFromPoint(195,817) [ahí está el icono «Carrito»] devolvía * #cn-more-info -> el usuario NO podía tocar la barra inferior antes de * aceptar las cookies. * * ARREGLO: en móvil subimos la barra de cookies para que se apoye JUSTO ENCIMA * de la barra inferior (55px), y le ponemos un tope de altura con scroll propio * para que nunca vuelva a comerse un tercio de la pantalla. Fuera de móvil, la * barra inferior no existe, así que esto no afecta al escritorio. * ═════════════════════════════════════════════════════════════════════════════ */ @media (max-width:767px){ /* COMPROBADO: la barra inferior .wd-toolbar existe en TODAS las páginas (home/tienda/carrito/registro), es fixed y mide 55px. NO hay ninguna clase wd-toolbar-* en el body (lo comprobé, no la inventé). Así que subimos la barra de cookies 55px fijos y le ponemos tope de altura con scroll propio. */ #cookie-notice{ bottom:55px !important; max-height:60vh !important; overflow-y:auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-07-14 · Auditoría móvil — E11 / E12 * ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:767px){ /* E11 · inputs a >=16px: por debajo, iOS hace zoom involuntario al enfocar */ .um input[type="text"], .um input[type="email"], .um input[type="tel"], .um input[type="password"], .um input[type="number"], .um textarea, .um select, input.s, .wd-search-inited input, .woocommerce form .form-row input.input-text{ font-size:16px !important; } /* E12 · el botón «volver arriba» pisaba el sello «Transferencia» del pie */ .scrollToTop, a.scrollToTop{ bottom:120px !important; } /* E12 · objetivos táctiles < 44px: iconos sociales del pie */ .wd-social-icon, a.wd-social-icon{ min-width:44px !important; min-height:44px !important; display:inline-flex !important; align-items:center; justify-content:center; } /* E12 · el CTA «Regístrese» de la ficha de producto (36px de alto -> 44) */ .wd-product .button.add_to_cart_button{ min-height:44px !important; } } /* E12 · enlace muerto del blog: con texto vacío -> 404. Lo ocultamos (el arreglo de servidor va con el lote SEO B1). */ a.author[href$="/author/"], .wd-post a.author[href$="/author/"]{ display:none !important; } /* ═══ 2026-07-14 · Bloques nuevos: reparto por tipo de cliente, FAQ y landings ═══ */ .sl-publicos{max-width:1180px;margin:0 auto;padding:64px 20px;} .sl-publicos h2{text-align:center;margin:0 0 8px;} .sl-publicos-sub{text-align:center;color:#5a5a5a;margin:0 0 32px;} .sl-publicos-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .sl-publico-card{display:block;padding:30px 26px;border:1px solid rgba(0,0,0,.10);border-radius:16px; background:#fff;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s;} .sl-publico-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08);border-color:var(--sl-teal,#00ab87);} .sl-publico-card h3{margin:0 0 10px;color:var(--sl-ink,#1a1a1a);} .sl-publico-card p{margin:0 0 14px;color:#4a4a4a;line-height:1.6;} .sl-publico-cta{font-weight:600;color:var(--sl-teal-d,#00806a);} @media(max-width:767px){.sl-publicos-grid{grid-template-columns:1fr;}.sl-publicos{padding:44px 16px;}} .sl-faq-home{max-width:900px;margin:0 auto;padding:0 20px 64px;} .sl-faq-home h2{text-align:center;margin:0 0 28px;} .sl-faq h3{font-size:1.05rem;margin:22px 0 6px;color:var(--sl-ink,#1a1a1a);} .sl-faq p{margin:0 0 4px;color:#4a4a4a;line-height:1.65;} /* texto SEO al pie de las categorías */ .sl-cat-intro{margin:0 0 22px;font-size:1rem;line-height:1.7;color:#3f3f3f;} .sl-cat-intro p{margin:0;} .sl-cat-seo{max-width:1180px;margin:48px auto 0;padding:36px 0 8px;border-top:1px solid rgba(0,0,0,.08);} .sl-cat-seo h2{font-size:1.35rem;margin:28px 0 10px;} .sl-cat-seo p,.sl-cat-seo li{color:#4a4a4a;line-height:1.7;} .sl-cat-seo ul{padding-left:1.1em;} .sl-cat-seo li{margin:6px 0;} /* landings */ .sl-lp{max-width:900px;margin:0 auto;padding:56px 20px 72px;} .sl-lp-badge{display:inline-block;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:700; letter-spacing:.04em;text-transform:uppercase;background:rgba(0,171,135,.14);color:var(--sl-teal-d,#00806a); border:1px solid rgba(0,171,135,.45);margin:0 0 18px;} .sl-lp h1{margin:0 0 14px;line-height:1.18;} .sl-lp-sub{font-size:1.12rem;line-height:1.65;color:#3f3f3f;margin:0 0 26px;} .sl-lp h2{margin:38px 0 10px;font-size:1.4rem;} .sl-lp p{line-height:1.72;color:#454545;} .sl-lp-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 8px;} @media(max-width:767px){.sl-lp{padding:36px 16px 56px;}.sl-lp-cta .sl-btn{width:100%;text-align:center;}} /* ficha de producto: bloque B2B */ .sl-prod-b2b{max-width:1180px;margin:40px auto 0;padding:32px 0 0;border-top:1px solid rgba(0,0,0,.08);} .sl-prod-b2b h2{font-size:1.3rem;margin:0 0 18px;} .sl-prod-b2b-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 34px;} .sl-prod-b2b-item{padding:18px 20px;border:1px solid rgba(0,0,0,.09);border-radius:12px;background:#fbfbfa;} .sl-prod-b2b-item strong{display:block;margin:0 0 4px;color:var(--sl-ink,#1a1a1a);} .sl-prod-b2b-item span{color:#555;font-size:.94rem;line-height:1.55;} @media(max-width:767px){.sl-prod-b2b-grid{grid-template-columns:1fr;}} /* enlaces a las landings en el pie (todas las páginas) */ .sl-pie-landings{background:#f4f3f0;border-top:1px solid rgba(0,0,0,.07);padding:20px 16px;} .sl-pie-landings-inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;justify-content:center;} .sl-pie-landings-t{font-weight:700;color:var(--sl-ink,#1a1a1a);} .sl-pie-landings a{color:#00806a;text-decoration:none;font-weight:600;border-bottom:1px solid transparent;} .sl-pie-landings a:hover{border-bottom-color:#00806a;} @media(max-width:767px){.sl-pie-landings-inner{flex-direction:column;gap:8px;text-align:center;}} /* enlaces contextuales al pie de las categorías */ .sl-cat-links{max-width:1180px;margin:26px auto 0;display:flex;flex-wrap:wrap;gap:8px 20px;} .sl-cat-links a{color:#00806a;font-weight:600;text-decoration:none;} .sl-cat-links a:hover{text-decoration:underline;} /* ═══ 2026-07-14 · Accesibilidad (Lighthouse: 87 -> objetivo 95+) ═══ */ /* contraste: «152 productos» estaba en #a0a0a0 sobre blanco = 2,61 (hace falta 4,5) */ .sl-cat .c{color:#6b6b6b !important;} /* 5,4:1 ✅ */ /* los puntos del carrusel medían 8-12 px; el mínimo táctil es 24 px. El punto sigue viéndose pequeño, pero la zona pulsable es de 24 px. */ .sl-dots{gap:4px !important;} .sl-dots button{ width:24px !important; height:24px !important; background:transparent !important; border:0 !important; display:flex !important; align-items:center; justify-content:center; padding:0 !important; transform:none !important; } .sl-dots button::before{ content:""; display:block; width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.28); transition:background .18s, transform .18s; } .sl-dots button:hover::before{background:rgba(0,0,0,.5);} .sl-dots button.on::before{background:var(--sl-teal,#00ab87); transform:scale(1.5);} /* Contraste en las tarjetas de producto (Lighthouse pedía 4,5; había 2,18). El naranja de marca (#f59a57) NO se toca: sobre naranja va texto oscuro (9,5:1) y el texto naranja sobre blanco se oscurece lo justo. */ .wd-product-wrapper .wd-product-cats, .wd-product-wrapper .wd-product-cats a, .wd-product-wrapper .wd-meta-sep{color:#6b6b6b !important;} .wd-product-wrapper .button.add_to_cart_button, .woocommerce a.button.add_to_cart_button, .wd-product .button.add_to_cart_button{color:#1a1a1a !important;font-weight:700;} .wd-product-wrapper .price, .wd-product-wrapper .price .woocommerce-Price-amount, .wd-product .price{color:#a24e08 !important;} /* 🔴 2026-08-10 (tarde) · A la FICHA de producto no llegaba ninguno de esos tres selectores, y ahí vive el aviso que ve el invitado:

    *Precio disponible sólo para usuarios registrados*

    Medido sobre los píxeles pintados (no sobre el CSS declarado): naranja de marca sobre blanco = **2,18:1**. A 390 px ese texto mide 22 px, así que ni siquiera cuenta como «texto grande» y el mínimo exigible es 4,5:1. Se le aplica el MISMO #a24e08 que ya se calculó para las tarjetas (5,79:1) — no se inventa un color nuevo ni se toca el naranja de marca, que sobre relleno de botón con texto oscuro encima sigue estando bien (9,5:1). Alcance comprobado: las ~1235 tarjetas del catálogo ya estaban bien; esto afecta sólo al

    de la ficha. */ .single-product .summary > .price, .single-product .product .price, .woocommerce div.product p.price{color:#a24e08 !important;} /* ═══ 2026-07-14 · Botones de las landings: eran ILEGIBLES ═══════════════════ * El segundo botón (.sl-btn-ghost) estaba pensado para el hero (fondo con foto): * letra blanca y borde muy tenue. Sobre el fondo claro de las landings * desaparecía: el cliente no veía que había un botón. * Y el botón naranja llevaba letra blanca -> contraste 2,18 (hace falta 4,5). * El naranja de marca NO se toca; lo que cambia es la LETRA. */ .sl-lp .sl-btn, .sl-publicos .sl-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 26px; border-radius:10px; font-weight:700; text-decoration:none; transition:all .18s; } /* principal: naranja de marca + letra oscura (9,5:1 ✅) */ .sl-lp .sl-btn-primary, .sl-publicos .sl-btn-primary{ background:var(--sl-orange,#f59a57) !important; color:#1a1a1a !important; border:2px solid var(--sl-orange,#f59a57) !important; } .sl-lp .sl-btn-primary:hover{ background:#e8873f !important; border-color:#e8873f !important; } /* secundario: ahora SÍ se ve — fondo blanco, borde oscuro, letra oscura */ .sl-lp .sl-btn-ghost, .sl-publicos .sl-btn-ghost{ background:#fff !important; color:#1a1a1a !important; border:2px solid rgba(0,0,0,.35) !important; } .sl-lp .sl-btn-ghost:hover{ background:#1a1a1a !important; color:#fff !important; border-color:#1a1a1a !important; } /* ═══ Accesibilidad · últimos 2 fallos ══════════════════════════════════════ * Los puntos del carrusel seguían midiendo 8px pese al !important: la regla * vieja (.sl-dots button) tiene la MISMA especificidad que la mía, y encima un * «max-width:8px» que gana a «width». Uso un selector MÁS específico * (#sl-slider .sl-dots button = id + clase + tipo) para no depender del orden. */ #sl-slider .sl-dots{gap:2px !important;} #sl-slider .sl-dots button{ width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; max-width:24px !important; max-height:24px !important; /* anula el max-width:8px */ background:transparent !important; border:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; transform:none !important; border-radius:50% !important; } #sl-slider .sl-dots button::before{ content:"" !important; display:block !important; width:8px !important; height:8px !important; border-radius:50% !important; background:rgba(0,0,0,.30) !important; transition:background .18s, transform .18s; } #sl-slider .sl-dots button:hover::before{background:rgba(0,0,0,.55) !important;} #sl-slider .sl-dots button.on::before{background:var(--sl-teal,#00ab87) !important; transform:scale(1.5);} /* Contraste (Lighthouse pide 4,5:1) — el naranja de marca como FONDO no se toca */ .sl-publicos .sl-publico-card .sl-publico-cta{color:#00705c !important;} /* era #009676 = 3,73 */ .sl-cta .sl-btn, .sl-cta .sl-btn-primary, article .sl-cta a.sl-btn{color:#1a1a1a !important; font-weight:700 !important;} /* era blanco sobre naranja = 2,17 */ .wd-col-end span span{color:#00707f !important;} /* «bizum» era #00b0ca = 2,6 */ /* ═══ 2026-07-15 · Fuentes de iconos de Ultimate Member: 162 KB -> 4,3 KB ═══ * UM sirve FontAwesome 4.2 e Ionicons 2.0 en WOFF1 (formato de 2014): 98 KB + * 68 KB en CADA visita a /registro/, /login/ y /cuenta/. Y de los ~1.300 iconos * que traen, en pantalla se usan OCHO (lo medí: 4 de FA y 4 de Ionicons). * Aquí redefinimos las mismas @font-face apuntando a un SUBCONJUNTO en WOFF2 * con 50 glifos (los 8 en uso + margen para los que salen al interactuar). * No se toca el plugin: si UM se actualiza, esto sigue funcionando. * font-display:swap para que el texto no se quede en blanco esperando. */ @font-face{ font-family:'FontAwesome'; src:url('fonts/fontawesome-webfont.subset.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:swap; } @font-face{ font-family:'Ionicons'; src:url('fonts/ionicons.subset.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:swap; } /* ═══ 2026-07-15 · Bloque B2B + FAQ de la ficha: más ordenado, con color ═══ * Todo CSS nativo. Cero JavaScript, cero peticiones nuevas (los iconos son * emojis = caracteres de texto, no imágenes). No afecta al rendimiento. */ .sl-prod-b2b{max-width:1180px;margin:44px auto 0;padding:36px 0 0;border-top:1px solid var(--sl-cream-brd,#e7d9c0);} .sl-prod-b2b > h2{font-size:1.35rem;margin:0 0 20px;color:var(--sl-ink,#1d1d1d);} /* 4 tarjetas de argumentos B2B */ .sl-prod-b2b-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 40px;} .sl-prod-b2b-item{ position:relative;padding:20px 22px 20px 22px;border-radius:14px; background:linear-gradient(180deg,var(--sl-cream-hi,#fcf7ee),#fff); border:1px solid var(--sl-cream-brd,#e7d9c0); border-left:4px solid var(--sl-teal,#00ab87); transition:transform .18s ease, box-shadow .18s ease; } .sl-prod-b2b-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.07);} .sl-prod-b2b-item strong{ display:flex;align-items:center;gap:9px;margin:0 0 7px; font-size:1.02rem;color:var(--sl-brown,#3d3123); } /* icono emoji delante de cada título */ .sl-prod-b2b-item strong::before{ font-size:1.15rem;line-height:1;flex:0 0 auto; } .sl-prod-b2b-item:nth-child(1) strong::before{content:"📦";} /* sin pedido mínimo */ .sl-prod-b2b-item:nth-child(2) strong::before{content:"🏭";} /* stock en Sevilla */ .sl-prod-b2b-item:nth-child(3) strong::before{content:"🔒";} /* precio sin IVA */ .sl-prod-b2b-item:nth-child(4) strong::before{content:"🚚";} /* dropshipping */ /* las tarjetas 2 y 4 (envío/dropshipping) en naranja para diferenciar */ .sl-prod-b2b-item:nth-child(2), .sl-prod-b2b-item:nth-child(4){border-left-color:var(--sl-orange,#F59A57);} .sl-prod-b2b-item span{color:var(--sl-brown-soft,#6f5f49);font-size:.95rem;line-height:1.6;} .sl-prod-b2b-item a{color:var(--sl-teal-d,#009676);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;} .sl-prod-b2b-item a:hover{border-bottom-color:var(--sl-teal-d,#009676);} /* FAQ: cada pregunta en su tarjeta con franja de color */ .sl-prod-b2b .sl-faq{display:flex;flex-direction:column;gap:12px;} .sl-prod-b2b .sl-faq h3{ margin:0;padding:16px 18px 6px;font-size:1rem;font-weight:700; color:var(--sl-ink,#1d1d1d); background:var(--sl-teal-soft,#e2f5f0); border-radius:12px 12px 0 0;border-left:4px solid var(--sl-teal,#00ab87); } .sl-prod-b2b .sl-faq p{ margin:0;padding:10px 18px 16px;line-height:1.65; color:var(--sl-brown-soft,#6f5f49);font-size:.95rem; background:#fff;border:1px solid var(--sl-teal-soft,#e2f5f0);border-top:0; border-left:4px solid var(--sl-teal,#00ab87);border-radius:0 0 12px 12px; } .sl-prod-b2b .sl-faq a{color:var(--sl-teal-d,#009676);font-weight:600;} @media(max-width:767px){ .sl-prod-b2b-grid{grid-template-columns:1fr;gap:12px;} .sl-prod-b2b > h2{font-size:1.2rem;} } /* ═══ 2026-07-15 · FAQ con icono "+" en CSS (nada de emoji) ══════════════════ */ .sl-prod-b2b .sl-faq h3{ position:relative;padding-left:46px; /* hueco para el círculo "+" */ } .sl-prod-b2b .sl-faq h3::before{ content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%); width:22px;height:22px;border-radius:50%; background:var(--sl-teal,#00ab87); } .sl-prod-b2b .sl-faq h3::after{ content:"";position:absolute;left:19px;top:50%;transform:translateY(-50%); width:12px;height:12px; /* la cruz "+" hecha con dos líneas blancas (gradientes), sin imágenes */ background: linear-gradient(#fff,#fff) center/12px 2.5px no-repeat, linear-gradient(#fff,#fff) center/2.5px 12px no-repeat; } /* ═══ 2026-07-15 · Carrito vacío: quitar el grid React de «Nuevo en la tienda» * Ese grid (woocommerce/product-new) se renderiza tarde con React y era la causa * del CLS 0,842 (la página saltaba) y del LCP de 6,2 s. En un carrito VACÍO no * aporta nada: el cliente solo necesita un enlace para volver a la tienda. * Solo CSS: no toca el checkout, ni el carrito con productos, ni las cross-sells * de un carrito lleno. Reversible borrando este bloque. */ .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new, .wp-block-woocommerce-empty-cart-block .wc-block-grid, .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new .wc-block-grid{ display:none !important; } /* reservar altura mientras React hidrata el carrito -> sin saltos de layout */ .wp-block-woocommerce-cart.is-loading{ min-height:420px !important; } /* el separador y el encabezado «Nuevo en la tienda» del carrito vacío también fuera */ .wp-block-woocommerce-empty-cart-block > .wp-block-separator, .wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(:first-of-type){ display:none !important; } /* ═══ 2026-07-15 · Vídeo de producto — tarjeta 680px, botón naranja (CSS puro) ═ * Estructura de 2 capas a propósito: * .sl-yt -> limita el ancho a 680px y centra * .sl-yt-frame -> hace el 16:9 con padding-bottom (relativo a 680, NO al * contenedor padre; ese era el bug del hueco negro). * padding-bottom en vez de aspect-ratio para que funcione en Safari/Android * viejos. El reproductor real solo carga al pulsar (facade, functions.php). */ .sl-yt{width:100%;max-width:680px;margin:24px auto;} .sl-yt-frame{position:relative;width:100%;height:0;padding-bottom:56.25%; border-radius:14px;overflow:hidden;cursor:pointer;background:#0d0d0d; box-shadow:0 10px 30px rgba(0,0,0,.16);} .sl-yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border:0;display:block;transition:transform .4s ease;} .sl-yt:hover .sl-yt-thumb{transform:scale(1.05);} .sl-yt-frame::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.30));transition:background .3s ease;} .sl-yt:hover .sl-yt-frame::after{background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.20));} .sl-yt-badge{position:absolute;top:14px;left:14px;z-index:2; display:inline-flex;align-items:center;gap:7px; padding:6px 13px 6px 11px;border-radius:999px; background:var(--sl-orange,#f59a57);color:#fff;font-size:.8rem;font-weight:700; box-shadow:0 3px 10px rgba(0,0,0,.25);} .sl-yt-badge::before{content:"";flex:0 0 auto;border-style:solid;border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff;} .sl-yt-play{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%); width:78px;height:78px;border:0;border-radius:50%;cursor:pointer; background:var(--sl-orange,#f59a57);box-shadow:0 6px 22px rgba(245,154,87,.55); transition:transform .22s ease,box-shadow .22s ease,background .22s ease;} .sl-yt:hover .sl-yt-play{transform:translate(-50%,-50%) scale(1.09); background:#ef8a3c;box-shadow:0 8px 30px rgba(245,154,87,.75);} .sl-yt-play::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%); border-style:solid;border-width:14px 0 14px 23px;border-color:transparent transparent transparent #fff;} @media(max-width:767px){ .sl-yt{margin:18px auto;} .sl-yt-frame{border-radius:12px;} .sl-yt-play{width:62px;height:62px;} .sl-yt-play::before{border-width:11px 0 11px 18px;} .sl-yt-badge{font-size:.72rem;padding:5px 11px 5px 9px;top:11px;left:11px;} } /* ── Mis pedidos: columna «Pedido» (número) añadida por hook (2026-07-15) ── */ .um-account .um-woo-orders .order-number a.sl-order-number{ font-weight:700; color:var(--sl-ink,#28313a); text-decoration:none; } .um-account .um-woo-orders .order-number a.sl-order-number:hover{ color:var(--sl-brand,#00ab87); } /* ═══════════════════════════════════════════════════════════════════════════ * 2026-08-07 · Llamada a registrarse en la FICHA DE PRODUCTO. * Para un invitado,

    se quedaba vacío (alto 0): * 1.212 fichas sin ninguna acción posible. Naranja = color de acción de la * marca (el verde queda para identidad), y el enlace de «Acceder» en verde * para que la jerarquía sea evidente: primero registrarse. * ═══════════════════════════════════════════════════════════════════════════ */ .sl-cta-precio{margin:4px 0 20px;} .sl-cta-precio__btn{ display:flex;align-items:center;justify-content:center;text-align:center; width:100%;max-width:340px;min-height:50px;padding:13px 22px;box-sizing:border-box; background:var(--sl-orange);color:#fff;border:0;border-radius:10px; font-size:15px;font-weight:700;line-height:1.25;text-decoration:none; transition:background .2s ease,transform .2s ease,box-shadow .2s ease;} .sl-cta-precio__btn:hover,.sl-cta-precio__btn:focus{ background:var(--sl-orange-d);color:#fff;transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.14);} .sl-cta-precio__btn:focus-visible{outline:3px solid var(--sl-teal);outline-offset:2px;} .sl-cta-precio__pie{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--sl-muted);} .sl-cta-precio__pie a{color:var(--sl-teal);font-weight:600;text-decoration:underline;} .sl-cta-precio__pie a:hover{color:var(--sl-teal-d);} @media (max-width:767px){ /* a ancho completo en móvil: es la única acción de la página */ .sl-cta-precio__btn{max-width:none;} } /* ───────────────────────────────────────────────────────────────────────────── Etiqueta «AGOTADO» de las fichas del catálogo — 2026-08-08 (pedido del dueño) ANTES: Woodmart la pinta blanca sobre la foto del producto (.product-label.out-of-stock{background-color:var(--bgcolor-white); color:var(--color-gray-900)}) → sobre fotos claras casi no se ve. AHORA: fondo naranja de marca (--sl-orange) con texto oscuro. POR QUÉ TEXTO OSCURO Y NO BLANCO (medido, no a ojo): naranja #F59A57 + texto blanco → contraste 2,18:1 🔴 ilegible naranja #F59A57 + texto #1a1a1a → contraste 7,99:1 ✅ La etiqueta es pequeña (12px), así que el mínimo exigible es 4,5:1. El blanco no llega ni de lejos; el texto oscuro sí, y mantiene EXACTAMENTE el naranja de marca que se pidió. 🔴 NO TOCA LA REGLA DE INVITADOS. El stock sigue oculto para quien no ha iniciado sesión: eso lo hace functions.php (wp_head, prioridad 99) con `display:none !important` sobre estos mismos selectores. Aquí no se toca `display`, así que esa regla sigue mandando y el invitado sigue sin ver nada. ───────────────────────────────────────────────────────────────────────────── */ .wd-product .product-label.out-of-stock, .product-labels .product-label.out-of-stock, .wd-product .out-of-stock.product-label, .wd-label.out-of-stock{ background-color:var(--sl-orange) !important; color:#1a1a1a !important; font-weight:700 !important; letter-spacing:.02em; box-shadow:0 1px 3px rgba(0,0,0,.18); } /* ───────────────────────────────────────────────────────────────────────────── Menú lateral de «Mi cuenta»: las opciones de dos líneas se salían de su píldora — 2026-08-08 (reportado por el dueño con una ventana estrecha) MEDIDO en el navegador, a 1000px de ancho: «Cuenta» alto 56 · contenido 56 → cabe «Cambiar la contraseña» alto 56 · contenido 73 → 🔴 SE SALE «Dirección de Facturación» alto 56 · contenido 73 → 🔴 SE SALE «Dirección de envío» alto 56 · contenido 56 → cabe O sea: la píldora está clavada a la altura de UNA línea. En cuanto el texto necesita dos (que es lo que pasa al estrecharse la columna), el sobrante se pinta FUERA del recuadro, encima de la opción siguiente. El alto fijo lo pone el CSS de Ultimate Member; nuestras reglas de más arriba solo tocan padding/color, por eso no bastaban. Aquí se libera el alto y se deja que la píldora crezca con el texto, manteniendo el icono y la flecha centrados. ───────────────────────────────────────────────────────────────────────────── */ .um-account .um-account-side li a{ height:auto !important; min-height:48px; line-height:1.3 !important; white-space:normal !important; align-items:center !important; overflow:visible; } .um-account .um-account-side li a > span, .um-account .um-account-side li a .um-account-title{ flex:1 1 auto; min-width:0; /* sin esto, en flex el texto no puede partirse */ overflow-wrap:anywhere; } /* 🔴 EL CULPABLE DE VERDAD estaba una capa más adentro: Ultimate Member clava .um-account-title a height:30px y line-height:30px. Medido: alto 30, contenido 60 (dos líneas). Por eso liberar solo el no bastaba — la píldora crecía, pero el texto seguía saliéndose de SU span. */ .um-account .um-account-side li a .um-account-title{ height:auto !important; line-height:1.3 !important; display:block; } .um-account .um-account-side li a .um-account-icon, .um-account .um-account-side li a .um-account-arrow{ line-height:1 !important; } .um-account .um-account-side li a i, .um-account .um-account-side li a .um-account-icon, .um-account .um-account-side li a .um-account-arrow{ flex:0 0 auto; } /* La opción ACTIVA del menú tenía el texto gris oscuro sobre el verde de marca. Medido: .um-account-title llevaba color #555555 y pisaba el blanco que ya ponía el . Contraste #555 sobre #00ab87 = 1,74:1 (ilegible). Con blanco sube a 2,93:1: no llega al 4,5:1 ideal, pero es el color de marca y el texto va en negrita — se deja así a propósito y queda anotado. */ .um-account .um-account-side li.current a, .um-account .um-account-side li.current a *, .um-account .um-account-side li a.current, .um-account .um-account-side li a.current *{ color:#fff !important; } /* ── 2026-08-10 · Página 404 ────────────────────────────────────────────────── El tema pinta `

    No encontrado

    ` en la cabecera ANTES del `

    `, así que el documento quedaba con el encaje de encabezados invertido y además repetía lo que ya dice el h1. Se retira ese bloque entero (no es texto informativo: es una etiqueta redundante), con lo que el h1 pasa a ser el único encabezado de la página y en el orden correcto. */ body.error404 .page-header{display:none} body.error404 .sl-404-salida{margin:22px 0 0} body.error404 .sl-404-salida .sl-btn{display:inline-block} /* ── 2026-08-10 · Los paneles laterales seguían en el orden de tabulación ───── MEDIDO con teclas Tab REALES (CDP Input.dispatchKeyEvent, no element.focus()), 140 pulsaciones en la portada a 1440 px: las número 86 a 104 —19 seguidas— caían dentro de paneles fuera de pantalla (rect.x -340 … 1683, inViewport false), sin ninguna pista visual y sin que la página se moviera. Son tres: .mobile-nav (30 controles enfocables), .cart-widget-side (2) y .login-form-side (11). El tema sólo los saca de la pantalla con `transform: translate3d(±100%,0,0)` (parts/base.css); su `visibility` seguía siendo `visible`, así que para el teclado y para un lector de pantalla estaban perfectamente presentes: el menú se leía dos veces. Se arregla con CSS, no con JS, y con `visibility` en vez de `inert`: · `visibility:hidden` saca a los descendientes del orden de tabulación Y del árbol de accesibilidad, en todos los navegadores (inert no existe en Safari < 15.5 ni en WebView antiguos, justo el público que más hay aquí); · no hace falta `aria-hidden`, que por sí solo sería PEOR: dejaría el panel tabulable pero mudo (violación aria-hidden-focus). El estado abierto lo marca el tema con `.wd-opened` (parts/base-deferred.css: `.wd-side-hidden.wd-opened{transform:none}`), así que basta con devolver la visibilidad en esa clase. El retardo de 0,5 s al ocultar es para que la animación de cierre se siga viendo; al abrir es 0 s. Este fichero se carga DESPUÉS de parts/base.css (comprobado en el HTML), y el tema no declara `visibility` en estos selectores, así que no hay pelea. */ .wd-side-hidden{visibility:hidden;transition:transform .5s cubic-bezier(0.19, 1, 0.22, 1),visibility 0s linear .5s;} .wd-side-hidden.wd-opened{visibility:visible;transition:transform .5s cubic-bezier(0.19, 1, 0.22, 1),visibility 0s;} /* ── 2026-08-10 · Un solo anillo de foco para todo el sitio ────────────────── MEDIDO con foco real: el buscador de la cabecera daba `outline: 3px none` y los campos del registro `outline: 0px none` — es decir, quien navega con el teclado no ve DÓNDE está. Son las dos zonas por las que entra un cliente nuevo. Se usa `:focus-visible` (no `:focus`) para que el anillo salga con el teclado y NO al hacer clic con el ratón, que es el comportamiento nativo del navegador desde hace años. Una sola regla para todo el sitio en vez de ir parcheando controles sueltos: el teal oscuro que ya está definido arriba da 7:1 sobre blanco y sobre el crema del fondo. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline:3px solid var(--sl-teal-d) !important; outline-offset:2px !important; border-radius:3px; } /* Sobre fondo oscuro (pie, aviso de cookies, hero) el teal no se ve: allí blanco. */ .wd-footer :where(a, button, input, [tabindex]):focus-visible, #cookie-notice :where(a, button, [tabindex]):focus-visible{ outline-color:#fff !important; } /* Ultimate Member pone su propio `outline:none !important` en varios controles y `:where()` tiene especificidad CERO a propósito, así que allí perdía. Medido con la tecla Tab de verdad: 5 de 30 paradas en /registro/ se quedaban sin anillo (a.um-toggle-gdpr y dos contenedores con tabindex). Se repite la regla para el ámbito de UM con selectores normales, que sí ganan. */ .um a:focus-visible, .um button:focus-visible, .um input:focus-visible, .um select:focus-visible, .um textarea:focus-visible, .um [tabindex]:focus-visible, a.um-toggle-gdpr:focus-visible, .um .um-field a.um-toggle-gdpr:focus-visible{ /* Estos necesitan selector más específico: la hoja de UM apaga el anillo con `outline:none !important` desde reglas más concretas que la genérica. */ outline:3px solid var(--sl-teal-d) !important; outline-offset:2px !important; }