/*
 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. */
.page-id-20087 .wd-content-layout.container{max-width:100%;padding-left:0;padding-right:0;}
.page-id-20087 .wd-page-content{padding-top:0;padding-bottom:0;}
.page-id-20087 .wd-content-area{margin-bottom:0;}
.page-id-20087 .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;}
.sl-btn-primary{background:var(--sl-orange);color:#fff;}
.sl-btn-primary:hover{background:var(--sl-orange-d);color:#fff;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) ───────── */
.page-id-20087 .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. */
.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ú. */
.page-id-20087 .whb-header{margin-bottom:0 !important;}
.page-id-20087 .wd-page-content,
.page-id-20087 .wd-content-layout,
.page-id-20087 .wd-content-area,
.page-id-20087 .entry-content{
  padding-top:0 !important;margin-top:0 !important;
  padding-bottom:0 !important;margin-bottom:0 !important;}
.page-id-20087 .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; }
@media (max-width:767px){
  #cookie-notice .cookie-notice-container{
    flex-direction:column; align-items:center; text-align:center;
    padding:16px 16px 20px; gap:14px; 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 18px; overflow-wrap:break-word;
    text-align:center !important; font-size:13.5px !important; line-height:1.5; }
  /* botones apilados a lo ancho, con aire entre ellos (antes salían pegados/desbordados) */
  #cn-notice-buttons{ flex-direction:column; align-items:stretch; gap:10px;
    width:100%; max-width:270px; margin:0 auto; }
  #cn-notice-buttons .cn-button{ width:100% !important; margin:0 !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;} }
.um a.um-toggle-gdpr{padding:8px 0;display:inline-block;}

/* UM(登录/注册)蓝按钮 → 行动橙 */
.um .um-button,.um input[type=submit].um-button{background:var(--sl-orange) !important;border-color:var(--sl-orange) !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;}
.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:60px 18px 72px;}
  .sl-hero .sl-h1{font-size:31px;}
  .sl-nav{display:none;}  /* 手机用手势滑动 */
}

@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;}
.um .um-button:hover{background:var(--sl-orange-d) !important;border-color:var(--sl-orange-d) !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;}
#cn-accept-cookie.cn-button{background-color:var(--sl-teal) !important;color:#fff !important;
  border:2px solid var(--sl-teal) !important;}
#cn-accept-cookie.cn-button:hover{background-color:var(--sl-teal-d) !important;border-color:var(--sl-teal-d) !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) */
  .page-id-20087 .sl-featured img,
  .page-id-20087 .wd-products-element img{ max-width:100% !important; height:auto !important; }
  .page-id-20087 .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){
  .page-id-20087 .sl-featured .products,
  .page-id-20087 .wd-products-element .products{
    display:grid !important;grid-template-columns:1fr 1fr !important;
    gap:12px !important;max-width:100% !important;}
  .page-id-20087 .sl-featured .wd-product,
  .page-id-20087 .wd-products-element .wd-product{min-width:0 !important;max-width:100% !important;}
  .page-id-20087 .sl-featured img,
  .page-id-20087 .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){
  .page-id-20087 .sl-featured .products,
  .page-id-20087 .wd-products-element .products{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .page-id-20087 .sl-featured .wd-product,
  .page-id-20087 .wd-products-element .wd-product{min-width:0 !important;}
  .page-id-20087 .sl-featured .wd-product-img-link,
  .page-id-20087 .wd-products-element .wd-product-img-link{max-width:100% !important;overflow:hidden !important;}
  .page-id-20087 .sl-featured .wd-product-img-link img,
  .page-id-20087 .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.page-id-20087{overflow-x:clip;}
  .page-id-20087 .wd-product-img-link,.page-id-20087 .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){
  .page-id-20087 .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). ── */
body:not(.home) .wd-page-title-el,
body:not(.home) .wd-page-title{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 ── */
body:not(.home) .sl-phero{display: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) */

/* ── "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. ── */
.page-id-20087 .sl-sec,
.page-id-20087 .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){
  .page-id-20087 .sl-sec,.page-id-20087 .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 <section> 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 <span>. Pero el botón que ve el
 * INVITADO lo pinta otro codigo y el texto va SUELTO, sin <span>:
 *     <a href="/login/" class="button add_to_cart_button">Regístrese</a>
 * -> 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 <span>)
 *     -> no hay nada que deslizar, el texto se queda y el carrito le cae encima.
 *  2) CLIENTE: el <a> 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 <li> un enlace-manta invisible:
 *     <a href="{ficha}" class="cart-item-link wd-fill">Show</a>
 *     .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 <body>, 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 <body>) ── */
.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 <select> original en
   display:none y crea su propio contenedor... que nosotros escondíamos aquí.
   Resultado: NO SE VEÍA NINGUNO DE LOS DOS -> el campo País desaparecía.
   Ahora Select2 se apaga de verdad (ver sl_en_mi_cuenta) y NO escondemos nada:
   forzamos que el <select> 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 (<span class="arr">).
	   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):
 *
 *   <div class="um-account-nav">
 *     <a href="javascript:void(0);" data-tab="general" class="current">
 *        Cuenta                                   <- ① el TEXTO va SUELTO y PRIMERO
 *        <span class="ico"><i class="…"></i></span>   <- ② el icono va DESPUÉS
 *        <span class="arr"><i class="angle-down"></i></span>  <- ③ UM YA trae flecha
 *     </a>
 *   </div>
 *
 * 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 <a>. 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 <select> de «Mi cuenta»
 *
 * Diagnóstico REAL (capturado del navegador, no adivinado):
 *   - NO existe `<p id="billing_country_field">` (um-woocommerce no usa la
 *     maqueta de WooCommerce) -> todos mis selectores `.form-row` apuntaban a
 *     la nada.
 *   - El <select> de provincia lo esconde EL PROPIO CSS DE UM:
 *         um-styles.min.css  ::  .um-s1, .um-s2 { display:none }
 *   - El <select> de país existía… con 1px de ancho.
 *
 * Aquí lo forzamos por CSS (y por JS le quitamos las clases, ver functions.php).
 * ═════════════════════════════════════════════════════════════════════════ */
.um-account select,
.um-account select.um-s1,
.um-account select.um-s2,
.um-account select[name^="billing_"],
.um-account select[name^="shipping_"],
.um-account select.country_select,
.um-account select.state_select{
	display:block !important;
	visibility:visible !important;
	opacity:1 !important;
	width:100% !important;
	min-width:0 !important;
	max-width:100% !important;
	height:auto !important;
	min-height:46px;
	position:static !important;
	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;
	appearance:auto;
	cursor:pointer;
}
.um-account select:focus{
	border-color:var(--sl-teal,#00ab87) !important;
	box-shadow:0 0 0 3px rgba(0,171,135,.12) !important;
	outline:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2026-07-14 · Tras añadir al carrito salían DOS botones en la tarjeta
 *
 * WooCommerce, cuando terminas de añadir al carrito por AJAX, cuelga detrás del
 * botón un enlace <a class="added_to_cart wc-forward">Ver carrito</a>.
 * Woodmart lo pinta con el MISMO estilo de botón naranja -> quedaban dos
 * botones enormes apilados, feísimo.
 *
 * La cápsula del carrito de la cabecera ya se actualiza sola (y ahora además
 * lleva los botones −/+), así que ese segundo botón sobra.
 * Revertir = borrar este bloque.
 * ═════════════════════════════════════════════════════════════════════════ */
.wd-product .added_to_cart,
.wd-product a.added_to_cart,
.wd-product .wd-add-btn .added_to_cart,
.wd-product .wd-product-footer .added_to_cart,
.products .added_to_cart,
.wd-products-element .added_to_cart{
	display:none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2026-07-14 (LA DEFINITIVA) · «Mi cuenta»: la estructura REAL
 *
 * ORIGEN DEL PROBLEMA — um-woocommerce/includes/core/class-woocommerce-account.php,
 * método edit_address(), líneas 331-332:
 *
 *   331| $html = preg_replace('/\<span class\="woocommerce-input-wrapper"\>(.*?)\<\/span\>/im',
 *                             '<div class="um-field-area">$1</div>', $html);
 *   332| $html = preg_replace('/\<p([^\>]*?)\>(.*?)\<\/p\>/im', '$2', $html);   ← ¡ARRANCA EL <p>!
 *
 * O sea: coge el HTML estándar de WooCommerce y lo REESCRIBE A REGEX con la
 * maqueta de UM. El `<p class="form-row" id="billing_country_field">`
 * SIMPLEMENTE DEJA DE EXISTIR, y en su lugar queda:
 *
 *   <div class="um-field um-field-billing_country um-field-country ...">
 *      <div class="um-field-label"><label>…</label></div>
 *      <div class="um-field-area"><select …></select></div>
 *   </div>
 *
 * 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 <select> es el CSS del propio UM:
 *      um-styles.min.css  ::  .um-s1, .um-s2 { display:none }
 * (UM les pone esas clases porque piensa sustituirlos por su select2… que aquí
 *  no llega a montarse bien.)
 *
 * Aquí abajo, por fin, los selectores REALES.
 * ═════════════════════════════════════════════════════════════════════════ */

/* el contenedor del campo, sea el que sea, se ve */
.um-account .um-field,
.um-account .um-field-billing_country,
.um-account .um-field-billing_state,
.um-account .um-field-shipping_country,
.um-account .um-field-shipping_state{
	display:block !important;
	margin:0 0 16px !important;
}
.um-account .um-field-label{ margin:0 0 6px !important; }
.um-account .um-field-label label{
	display:block !important;
	font-weight:700;
	color:var(--sl-ink,#28313a);
	font-size:14px;
	line-height:1.3;
}
.um-account .um-field-area{
	display:block !important;
	width:100% !important;
	min-width:0;
}

/* ── los <select> (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 <input> 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 <div class="um-popup-overlay">
 *                                                 y  <div class="um-popup">  en <body>
 *   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: <a class="author" href=".../author/"> 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-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); }