/* =========================================================================
   CONPEX SOLUTIONS — Estilos de tienda
   Se cargan solo en páginas de WooCommerce (body.conpex-shop).

   NOTA SOBRE !important
   El tema padre (one-page-express) no trae ni una regla de WooCommerce, pero
   sí reglas genéricas muy agresivas sobre elementos que WooCommerce usa:
   `.button`, `h1`, `ol/ul`, `input[type=number]`, `table`. Se neutralizan de
   forma explícita. El !important se usa solo donde hay conflicto real
   comprobado, no por costumbre.

   Conflictos identificados en one-page-express/style.css:
     l.796  .button            uppercase, fondo blanco, sombra, letter-spacing
     l.315  h1                 uppercase, margin 54px, font-size 3em
     l.324  h2                 font-weight 300, margin 33px
     l.386  ol,ul              padding-left 40px, margin 10px
     l.441  input[type=number] width 100%, margin-bottom, min-height
     l.748  .content           background #ebebeb
     l.761  .page-content      padding 50px, min-height 700px
   ========================================================================= */

body.conpex-shop{
  --cpx-paper:#f4f5f2;
  --cpx-surface:#fff;
  --cpx-surface-2:#eeefeb;
  --cpx-ink:#0a0b0c;
  --cpx-ink-2:#41464b;
  --cpx-muted:#82878c;
  --cpx-line:#e4e2dd;
  --cpx-accent:#ff7a00;
  --cpx-accent-dk:#e56a00;
  --cpx-blue:#1e3a5f;
  --cpx-blue-soft:#eaf1f8;
  --cpx-ok:#2c6248;
  --cpx-r-btn:6px;
  --cpx-r-cta:8px;
  --cpx-r-card:10px;
  --cpx-sh:0 1px 2px rgba(10,11,12,.04), 0 8px 24px -12px rgba(10,11,12,.10);
  --cpx-sh-cta:0 4px 12px rgba(255,122,0,.28);
}

/* El tema padre centra el texto de todo el sitio por defecto
   (one-page-express/style.css: `body{text-align:center}`), pensado para
   una landing. En la tienda eso centraba título, precio, descripción y el
   contenido de las pestañas sin que ninguna regla nuestra lo pidiera. Se
   corrige una sola vez aquí arriba en vez de ir agregando `text-align:left`
   elemento por elemento. Lo que sí debe ir centrado (tarjetas, botones,
   el modal) ya lo pide explícitamente con su propio `text-align` o con
   flex `justify-content`, así que gana igual. */
body.conpex-shop{text-align:left}

/* =========================================================================
   1. CONTENEDOR
   Al declarar soporte de WooCommerce, el plugin dejó el modo de
   compatibilidad y ahora envuelve el contenido en #primary.content-area,
   que el tema no estiliza: sin ancho máximo, sin padding, a sangre completa.
   El contenedor lo damos aquí.
   ========================================================================= */

/*
 * Footer siempre al fondo, aunque el contenido sea corto.
 * En una ficha con poco texto, el documento entero medía menos que la
 * pantalla: el pie quedaba pegado al contenido, con hueco de fondo debajo
 * hasta el borde de la ventana. Al recargar tras un «Añadir al carrito»,
 * WooCommerce imprime un aviso arriba del producto (ver sección 5) que
 * alarga la página lo suficiente para disimularlo — pero es una
 * casualidad de esa página, no una solución. El patrón correcto es un
 * body en columna con altura mínima de pantalla, y el bloque intermedio
 * (#page → #primary) creciendo para empujar el pie hasta el borde.
 */
body.conpex-shop{
  background:var(--cpx-paper) !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:100vh !important;
}
body.conpex-shop div#page{
  background:var(--cpx-paper) !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  flex:1 0 auto !important;
  width:100%;
}
body.conpex-shop .content,
body.conpex-shop .page-content{
  background:var(--cpx-paper) !important;
  min-height:0 !important;
}
body.conpex-shop .page-content{padding-top:0 !important;padding-bottom:0 !important}

body.conpex-shop #primary,
body.conpex-shop #primary.content-area,
body.conpex-shop .woocommerce-page #primary{
  width:100% !important;
  max-width:1240px !important;
  margin:0 auto !important;
  padding:30px 22px 64px !important;
  float:none !important;
  flex:1 0 auto !important;
}
body.conpex-shop #main,
body.conpex-shop main#main.site-main{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
}
/* Por si el tema sí llega a envolver en su rejilla */
body.conpex-shop .gridContainer{max-width:1240px;padding-left:0;padding-right:0}

/* Cabecera de archivo / hero del tema */
body.conpex-shop .header-wrapper{display:none !important}
body.conpex-shop #opex-overlap-custom-background-to-remove{display:none !important}
body.conpex-shop .entry-header,
body.conpex-shop .entry-meta,
body.conpex-shop .posted-on,
body.conpex-shop .byline,
body.conpex-shop .comments-link,
body.conpex-shop .cat-links{display:none !important}

/* =========================================================================
   2. CABECERA Y PIE PROPIOS
   La cabecera del tema flota sobre un hero y su pie es solo copyright.
   En la tienda se ocultan y se imprimen los de CONPEX, con buscador,
   carrito, cuenta y contacto.
   ========================================================================= */

body.conpex-shop .header-top,
body.conpex-shop .footer{display:none !important}

/* ── Cabecera ── */
body.conpex-shop .conpex-hdr{background:var(--cpx-ink);color:#fff;position:relative;z-index:50}
body.conpex-shop .conpex-hdr-in{
  max-width:1240px;margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;gap:22px;
}
body.conpex-shop .conpex-brand{display:flex;align-items:center;gap:14px;flex:none}
body.conpex-shop .conpex-logo{
  display:block;text-decoration:none !important;color:#fff !important;line-height:1;
}
body.conpex-shop .conpex-logo-img{max-height:44px;width:auto}
body.conpex-shop .conpex-mark{
  display:block;font-weight:800;font-size:1.32rem;letter-spacing:.02em;color:#fff;
}
body.conpex-shop .conpex-mark i{color:var(--cpx-accent);font-style:normal}
body.conpex-shop .conpex-mark-sub{
  display:block;font-weight:600;font-size:.52rem;letter-spacing:.42em;color:#9aa0a6;margin-top:3px;
}
body.conpex-shop .conpex-tagline{
  border-left:1px solid #32373c;padding-left:14px;
  font-size:.6rem;line-height:1.35;letter-spacing:.06em;color:#b7bcc1;
  font-weight:600;text-transform:uppercase;
}

body.conpex-shop .conpex-nav{margin-left:auto}
body.conpex-shop .conpex-nav ul{
  display:flex !important;gap:20px;margin:0 !important;padding:0 !important;list-style:none !important;
}
body.conpex-shop .conpex-nav li{margin:0 !important;padding:0 !important;list-style:none !important;position:relative}
body.conpex-shop .conpex-nav a{
  color:#e8eaec !important;text-decoration:none !important;
  font-weight:600 !important;font-size:.74rem !important;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  display:block;padding:4px 0;border-bottom:2px solid transparent;
}
body.conpex-shop .conpex-nav a:hover,
body.conpex-shop .conpex-nav .current-menu-item > a{
  color:#fff !important;border-bottom-color:var(--cpx-accent);
}
body.conpex-shop .conpex-nav ul ul{
  display:none !important;position:absolute;top:100%;left:0;
  background:#1b1e21;padding:6px 0 !important;min-width:190px;border-radius:var(--cpx-r-btn);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);z-index:60;
}
body.conpex-shop .conpex-nav li:hover > ul{display:block !important}
body.conpex-shop .conpex-nav ul ul li a{padding:9px 16px;border:0;text-transform:none;letter-spacing:0;font-size:.82rem !important}

body.conpex-shop .conpex-tools{display:flex;align-items:center;gap:14px;flex:none}
body.conpex-shop .conpex-search{
  display:flex;align-items:center;background:#fff;
  border-radius:var(--cpx-r-btn);overflow:hidden;width:230px;
}
body.conpex-shop .conpex-search input[type=search]{
  border:0 !important;outline:0;padding:8px 12px !important;font-size:.84rem !important;
  width:100% !important;background:none !important;color:var(--cpx-ink) !important;
  margin:0 !important;min-height:0 !important;border-radius:0 !important;
}
body.conpex-shop .conpex-search button{
  background:var(--cpx-accent) !important;border:0 !important;cursor:pointer;
  padding:8px 11px !important;display:grid;place-items:center;
  border-radius:0 !important;box-shadow:none !important;margin:0 !important;min-height:0 !important;
}
body.conpex-shop .conpex-search button svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round}

body.conpex-shop .conpex-icon{
  background:none !important;border:0 !important;padding:0 !important;cursor:pointer;
  color:#fff !important;position:relative;display:grid;place-items:center;
  box-shadow:none !important;min-height:0 !important;text-decoration:none !important;
}
body.conpex-shop .conpex-icon svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.conpex-shop .conpex-icon:hover svg{stroke:var(--cpx-accent)}
body.conpex-shop .conpex-badge{
  position:absolute;top:-5px;right:-8px;background:var(--cpx-accent);color:#fff;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;font-weight:600;
  min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px;
  line-height:1;
}
body.conpex-shop .conpex-burger{display:none}
body.conpex-shop .conpex-mnav{display:none}

/* ── Franja de confianza ── */
/* El carrusel de móvil duplica el contenido a propósito (mide ~2x el ancho
   de la pantalla). El recorte va tanto aquí como en .conpex-trust-in para
   que ese exceso nunca llegue a empujar el ancho de la página. */
body.conpex-shop .conpex-trust{
  background:var(--cpx-surface);border-bottom:1px solid var(--cpx-line);
  overflow-x:hidden;
}
body.conpex-shop .conpex-trust-in{
  max-width:1240px;margin:0 auto;padding:13px 22px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
/* La segunda copia (aria-hidden) solo existe para el carrusel de móvil.
   En escritorio se oculta y la primera se acomoda en la rejilla de arriba
   como si el envoltorio extra no existiera. */
body.conpex-shop .conpex-trust-track{display:contents}
body.conpex-shop .conpex-trust-track[aria-hidden]{display:none}
body.conpex-shop .conpex-trust-i{display:flex;align-items:center;gap:11px;min-width:0}
body.conpex-shop .conpex-trust-i svg{
  width:30px;height:30px;flex:none;stroke:var(--cpx-ink);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
body.conpex-shop .conpex-trust-i b{
  display:block;font-weight:700;font-size:.73rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.3;color:var(--cpx-ink);
}
body.conpex-shop .conpex-trust-i span{display:block;font-size:.76rem;color:var(--cpx-muted);line-height:1.3}

/* ── Pie ── */
body.conpex-shop .conpex-ftr{background:var(--cpx-ink);color:#c3c7cb}
body.conpex-shop .conpex-ftr-in{
  max-width:1240px;margin:0 auto;padding:22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
}
body.conpex-shop .conpex-logo-ftr .conpex-mark{font-size:1.18rem}
body.conpex-shop .conpex-ftr-tag{
  font-size:.85rem;border-left:1px solid #32373c;padding-left:18px;color:#c3c7cb;
}
body.conpex-shop .conpex-ftr-nav{margin-left:auto}
body.conpex-shop .conpex-ftr-nav ul{
  display:flex !important;gap:18px;margin:0 !important;padding:0 !important;list-style:none !important;flex-wrap:wrap;
}
body.conpex-shop .conpex-ftr-nav li{margin:0 !important;padding:0 !important;list-style:none !important}
body.conpex-shop .conpex-ftr-nav a{color:#c3c7cb !important;text-decoration:none !important;font-size:.85rem !important}
body.conpex-shop .conpex-ftr-nav a:hover{color:#fff !important}
body.conpex-shop .conpex-ftr-nav ul ul{display:none !important}

body.conpex-shop .conpex-social{display:flex;gap:10px}
body.conpex-shop .conpex-social a{
  width:30px;height:30px;border-radius:999px;background:#262b2f;
  display:grid;place-items:center;text-decoration:none !important;
}
body.conpex-shop .conpex-social a:hover{background:var(--cpx-accent)}
body.conpex-shop .conpex-social svg{width:16px;height:16px;stroke:#c3c7cb;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.conpex-shop .conpex-social a:hover svg{stroke:#fff}

body.conpex-shop .conpex-ftr-tel{
  display:flex;gap:18px;border-left:1px solid #32373c;padding-left:20px;flex-wrap:wrap;
}
body.conpex-shop .conpex-ftr-tel a{
  display:flex;align-items:center;gap:7px;color:#c3c7cb !important;
  text-decoration:none !important;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;
}
body.conpex-shop .conpex-ftr-tel a:hover{color:#fff !important}
body.conpex-shop .conpex-ftr-tel svg{width:17px;height:17px;flex:none;stroke:var(--cpx-accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   4. NEUTRALIZACIÓN DE REGLAS GENÉRICAS DEL TEMA
   ========================================================================= */

/* ol,ul del tema: padding-left 40px + margin 10px.
   Rompe la rejilla de productos, las miniaturas y las pestañas. */
body.conpex-shop ul.products,
body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs,
body.conpex-shop .woocommerce-tabs ul.tabs,
body.conpex-shop ul.woocommerce-error,
body.conpex-shop .conpex-opts{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
body.conpex-shop ul.products li,
body.conpex-shop .flex-control-thumbs li,
body.conpex-shop .woocommerce-tabs ul.tabs li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* .button del tema: uppercase, fondo blanco, sombra triple, letter-spacing 1px.
   Alcanza a TODOS los botones de WooCommerce. */
body.conpex-shop .woocommerce a.button,
body.conpex-shop .woocommerce button.button,
body.conpex-shop .woocommerce input.button,
body.conpex-shop a.button,
body.conpex-shop button.button,
body.conpex-shop .conpex-btn,
body.conpex-shop .conpex-opt{
  text-transform:none !important;
  letter-spacing:0 !important;
  margin-bottom:0 !important;
  line-height:1.3 !important;
  font-family:inherit !important;
}

/* Encabezados: el tema pone h1 en uppercase con 54px de margen inferior. */
body.conpex-shop h1,
body.conpex-shop h2,
body.conpex-shop h3{
  text-transform:none !important;
  color:var(--cpx-ink) !important;
}

/* Tablas */
body.conpex-shop table{border-collapse:collapse !important;width:100%}

/* =========================================================================
   5. MIGAS
   ========================================================================= */

body.conpex-shop .woocommerce-breadcrumb{
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  font-size:.7rem !important;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cpx-muted) !important;margin:0 0 18px !important;padding:0 !important;
}
body.conpex-shop .woocommerce-breadcrumb a{color:var(--cpx-muted) !important;text-decoration:none}
body.conpex-shop .woocommerce-breadcrumb a:hover{color:var(--cpx-accent) !important}

/* Avisos («Producto añadido a tu carrito», errores, etc.)
   Se rearma como tarjeta plana en flex: el ícono (::before de WooCommerce),
   el texto y el botón quedan en una sola fila, en vez del padding asimétrico
   e ícono absoluto que trae por defecto. El botón «Ver carrito» tenía el
   look genérico del tema — fondo blanco y sombra triple — porque antes solo
   le habíamos quitado mayúsculas, no el color; aquí se resuelve del todo. */
body.conpex-shop .woocommerce-message,
body.conpex-shop .woocommerce-info{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  border-top-color:var(--cpx-accent) !important;
  border-radius:var(--cpx-r-card) !important;
  background:var(--cpx-surface) !important;
  box-shadow:var(--cpx-sh) !important;
  padding:16px 18px !important;
  margin:0 0 24px !important;
  color:var(--cpx-ink-2) !important;
  font-size:.94rem !important;
}
body.conpex-shop .woocommerce-message::before,
body.conpex-shop .woocommerce-info::before{
  position:static !important;
  top:auto !important;left:auto !important;
  color:var(--cpx-accent) !important;
  font-size:1.35rem !important;
  flex:none;
}
body.conpex-shop .woocommerce-message::after,
body.conpex-shop .woocommerce-info::after{display:none !important}

/* `.woocommerce-error` es <ul><li>…</li></ul> y puede traer varios avisos:
   se apila en columna, no en fila, para no amontonar mensajes uno junto
   al otro si hay más de uno. */
body.conpex-shop .woocommerce-error{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  border-top-color:#96301f !important;
  border-radius:var(--cpx-r-card) !important;
  background:var(--cpx-surface) !important;
  box-shadow:var(--cpx-sh) !important;
  padding:16px 18px !important;
  margin:0 0 24px !important;
  color:var(--cpx-ink-2) !important;
  font-size:.94rem !important;
}
body.conpex-shop .woocommerce-error::before{
  position:static !important;top:auto !important;left:auto !important;
  color:#96301f !important;font-size:1.35rem !important;
}
body.conpex-shop .woocommerce-error::after{display:none !important}
body.conpex-shop .woocommerce-error li{display:flex !important;align-items:center;gap:10px}

body.conpex-shop .woocommerce-message .button,
body.conpex-shop .woocommerce-message a.button,
body.conpex-shop .woocommerce-error .button,
body.conpex-shop .woocommerce-error a.button{
  float:none !important;
  margin-left:auto !important;
  flex:none;
  background:var(--cpx-surface-2) !important;
  color:var(--cpx-ink-2) !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:var(--cpx-r-btn) !important;
  padding:10px 16px !important;
  font-weight:600 !important;
  font-size:.84rem !important;
  min-height:0 !important;
  white-space:nowrap;
  transition:background .15s,color .15s;
}
body.conpex-shop .woocommerce-message .button:hover,
body.conpex-shop .woocommerce-message a.button:hover,
body.conpex-shop .woocommerce-error .button:hover,
body.conpex-shop .woocommerce-error a.button:hover{
  background:var(--cpx-ink) !important;
  color:#fff !important;
}

/* =========================================================================
   6. FICHA DE PRODUCTO
   ========================================================================= */

body.conpex-shop div.product{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:44px;
  align-items:start;
}
/* min-width:0 es la protección complementaria a minmax(0,1fr): sin ella,
   un elemento de rejilla conserva un mínimo del tamaño de su contenido y
   puede estirar su columna aunque la pista sí permita encogerse. Con las
   miniaturas en fila con scroll, esto es lo que mantiene el desbordamiento
   dentro de la galería y no en la página. */
body.conpex-shop div.product .woocommerce-product-gallery,
body.conpex-shop div.product .summary{
  width:100% !important;float:none !important;margin:0 !important;padding:0 !important;
  min-width:0 !important;
}
body.conpex-shop div.product .woocommerce-tabs,
body.conpex-shop div.product .related,
body.conpex-shop div.product .up-sells{grid-column:1/-1}

/* Clearfix heredado: al convertir estos contenedores en grid/flex, los
   ::before/::after con content:"" pasan a ocupar una celda real. */
body.conpex-shop .conpex-trust-in::before,
body.conpex-shop .conpex-trust-in::after,
body.conpex-shop .conpex-ral-head::before,
body.conpex-shop .conpex-ral-head::after,
body.conpex-shop .conpex-ral-grid::before,
body.conpex-shop .conpex-ral-grid::after,
body.conpex-shop div.product::before,
body.conpex-shop div.product::after,
body.conpex-shop ul.products::before,
body.conpex-shop ul.products::after,
body.conpex-shop form.cart::before,
body.conpex-shop form.cart::after,
body.conpex-shop .woocommerce-variation-add-to-cart::before,
body.conpex-shop .woocommerce-variation-add-to-cart::after,
body.conpex-shop .flex-control-thumbs::before,
body.conpex-shop .flex-control-thumbs::after,
body.conpex-shop .woocommerce-tabs ul.tabs::before,
body.conpex-shop .woocommerce-tabs ul.tabs::after,
body.conpex-shop .woocommerce-tabs ul.tabs li::before,
body.conpex-shop .woocommerce-tabs ul.tabs li::after,
body.conpex-shop .summary::before,
body.conpex-shop .summary::after,
body.conpex-shop .conpex-docs::before,
body.conpex-shop .conpex-docs::after,
body.conpex-shop .conpex-opts::before,
body.conpex-shop .conpex-opts::after,
body.conpex-shop .conpex-card-actions::before,
body.conpex-shop .conpex-card-actions::after,
body.conpex-shop .conpex-modal::before,
body.conpex-shop .conpex-modal::after,
body.conpex-shop .related ul.products::before,
body.conpex-shop .related ul.products::after{
  content:none !important;display:none !important;
}

/* ── Galería ── */
body.conpex-shop .woocommerce-product-gallery__image{
  background:var(--cpx-surface);border-radius:var(--cpx-r-card);overflow:hidden;
}
body.conpex-shop .woocommerce-product-gallery__image img,
body.conpex-shop .woocommerce-product-gallery__wrapper{border-radius:var(--cpx-r-card)}
/* Un solo renglón con scroll lateral — antes era una rejilla de 4 columnas
   que partía las miniaturas en dos filas en cuanto había más de 4 fotos.
   Aplica igual en escritorio y en móvil. */
body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs{
  display:flex !important;flex-wrap:nowrap !important;gap:11px;
  margin-top:11px !important;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;padding-bottom:3px;
}
body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{height:5px}
body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb{
  background:var(--cpx-line);border-radius:99px;
}
body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs li{
  width:86px !important;flex:0 0 auto !important;float:none !important;
  scroll-snap-align:start;
}
body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs img{
  border-radius:var(--cpx-r-btn);border:2px solid transparent;opacity:1 !important;
  box-shadow:var(--cpx-sh);transition:border-color .15s;
  width:100%;aspect-ratio:1/1;object-fit:cover;
}
body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs img:hover{border-color:var(--cpx-accent)}
body.conpex-shop .woocommerce-product-gallery__trigger{
  background:#fff !important;border-radius:999px !important;
  box-shadow:0 2px 10px rgba(10,11,12,.18) !important;
  width:38px !important;height:38px !important;
  display:grid !important;place-items:center;top:14px !important;right:14px !important;
}

/* ── Título y SKU ── */
body.conpex-shop div.product .product_title{
  font-size:clamp(1.85rem,3.2vw,2.6rem) !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-.022em !important;
  text-transform:none !important;
  color:var(--cpx-ink) !important;
  margin:0 0 4px !important;
  padding:0 !important;
}
body.conpex-shop .conpex-sku{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;
  color:var(--cpx-muted);letter-spacing:.02em;margin-bottom:12px;
}
body.conpex-shop .conpex-sku-val{color:var(--cpx-ink-2)}

/* ── Precio ── */
body.conpex-shop div.product p.price,
body.conpex-shop div.product span.price{
  color:var(--cpx-accent) !important;
  font-weight:800 !important;
  font-size:clamp(1.9rem,3.6vw,2.7rem) !important;
  line-height:1.05 !important;letter-spacing:-.02em;
  margin:0 !important;font-variant-numeric:tabular-nums;
}
body.conpex-shop div.product p.price del{opacity:.4;font-size:.5em;font-weight:600}
body.conpex-shop div.product p.price ins{text-decoration:none;background:none}

/* El sufijo «IVA incluido» lo agrega WooCommerce dentro del precio
   (Ajustes → Impuestos → Sufijo a mostrar con el precio). Se saca del número
   grande y se pone como línea pequeña debajo. */
body.conpex-shop .woocommerce-price-suffix,
body.conpex-shop small.woocommerce-price-suffix{
  display:block !important;
  font-size:.8rem !important;
  font-weight:400 !important;
  color:var(--cpx-muted) !important;
  letter-spacing:0 !important;
  margin-top:2px !important;
  line-height:1.4 !important;
}

/* El precio duplicado de la variación se oculta por JS: el de arriba pasa a
   mostrar la variación elegida. Esto lo cubre si el JS no llegara a correr. */
body.conpex-shop .woocommerce-variation-price[hidden]{display:none !important}
body.conpex-shop .woocommerce-variation-price .price{
  font-size:1.9rem !important;display:block;margin-bottom:10px !important;
}

body.conpex-shop div.product .woocommerce-product-details__short-description{
  color:var(--cpx-ink-2);font-size:.97rem;max-width:56ch;margin:16px 0 0;
}
body.conpex-shop div.product .woocommerce-product-details__short-description p{margin:0}

/* ── Disponibilidad ── */
body.conpex-shop .conpex-avail{
  display:inline-flex;align-items:center;gap:8px;margin-top:9px;
  font-size:.87rem;color:var(--cpx-ok);font-weight:600;
}
body.conpex-shop .conpex-dot{width:7px;height:7px;border-radius:999px;background:var(--cpx-ok);flex:none}
body.conpex-shop .stock{color:var(--cpx-ok) !important;font-size:.87rem}

/* ── Selectores de variación ── */
body.conpex-shop table.variations{
  width:100% !important;border:0 !important;margin:18px 0 0 !important;background:none !important;
}
body.conpex-shop table.variations tbody,
body.conpex-shop table.variations tr,
body.conpex-shop table.variations td,
body.conpex-shop table.variations th{
  display:block !important;width:100% !important;border:0 !important;
  padding:0 !important;background:none !important;
}
body.conpex-shop table.variations tr{margin-bottom:16px !important}
/* Antes usaba la tipografía de cuerpo a .7rem con mucho letter-spacing:
   se leía delgado y plano. La fuente de despliegue (Archivo), más grande,
   con menos espaciado entre letras y en negro en vez de gris, le da el
   mismo peso visual que un título real. El margen inferior más corto pega
   el título a sus opciones — antes quedaban demasiado separados. */
body.conpex-shop table.variations th.label label{
  font-family:Archivo,"Arial Narrow",Helvetica,sans-serif !important;
  font-weight:700 !important;font-size:.86rem !important;
  letter-spacing:.03em !important;text-transform:uppercase !important;
  color:var(--cpx-ink) !important;margin:0 0 5px !important;display:block !important;
}
body.conpex-shop table.variations td.value{position:relative}
/* Enlace «Limpiar»: quitado también por PHP. Deseleccionar solo deja al
   cliente sin precio y sin poder comprar. */
body.conpex-shop .reset_variations{display:none !important}

/* Botonera generada por JS. El <select> sigue siendo la fuente de verdad. */
body.conpex-shop .conpex-opts{display:flex !important;flex-wrap:wrap;gap:9px}
body.conpex-shop .conpex-opt{
  background:var(--cpx-surface) !important;
  border:1px solid var(--cpx-line) !important;
  border-radius:var(--cpx-r-btn) !important;
  padding:10px 20px !important;
  font-weight:600 !important;font-size:.9rem !important;
  color:var(--cpx-ink-2) !important;
  box-shadow:none !important;
  min-height:0 !important;width:auto !important;
  cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
body.conpex-shop .conpex-opt:hover{border-color:#b9b6af !important;box-shadow:none !important}
body.conpex-shop .conpex-opt[aria-pressed="true"]{
  background:var(--cpx-ink) !important;border-color:var(--cpx-ink) !important;color:#fff !important;
}
body.conpex-shop .conpex-opt[disabled]{
  background:var(--cpx-surface-2) !important;color:#b4b8bc !important;
  cursor:not-allowed;text-decoration:line-through;
}
body.conpex-shop table.variations select.conpex-hidden{
  position:absolute !important;width:1px !important;height:1px !important;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0 !important;padding:0 !important;
}

/* ── Campo de color abierto ── */
body.conpex-shop .conpex-colorfield{
  background:var(--cpx-blue-soft);border-radius:var(--cpx-r-card);
  padding:14px 16px;margin:14px 0 0;
}
body.conpex-shop .conpex-colorfield[hidden]{display:none !important}
body.conpex-shop .conpex-colorfield label{
  display:block;font-weight:700;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cpx-blue) !important;margin-bottom:7px;
}
body.conpex-shop .conpex-colorfield input[type=text]{
  width:100% !important;flex:1 1 auto;min-width:0;
  border:1px solid #c5d5e4 !important;
  border-radius:var(--cpx-r-btn) !important;padding:10px 12px !important;
  font-size:.92rem !important;background:#fff !important;color:var(--cpx-ink) !important;
  margin:0 !important;min-height:0 !important;
}
body.conpex-shop .conpex-colorfield input:focus{outline:2px solid var(--cpx-blue);outline-offset:1px}
body.conpex-shop .conpex-colorfield small{
  display:block;margin-top:7px;font-size:.78rem;color:var(--cpx-blue);line-height:1.4;
}
body.conpex-shop .conpex-colorerr{color:#96301f;font-size:.83rem;font-weight:600;margin:8px 0 0}
body.conpex-shop .conpex-colorerr[hidden]{display:none !important}
body.conpex-shop .conpex-shake{animation:conpexShake .26s}
@keyframes conpexShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Campo + vista previa + botón, en una sola fila. flex-wrap:nowrap y el
   botón con white-space:nowrap evitan que el texto del botón se parta en
   varias líneas cuando el espacio se aprieta — antes de esto se veía
   partido en 3-4 renglones. */
body.conpex-shop .conpex-color-input-row{
  position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;
}
body.conpex-shop .conpex-color-input-row[hidden]{display:none !important}
body.conpex-shop .conpex-ral-preview{
  width:34px;height:34px;flex:none;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px #c5d5e4;
}
body.conpex-shop .conpex-ral-pdf{
  display:inline-block;margin-top:9px;font-size:.78rem;color:var(--cpx-blue) !important;
  text-decoration:underline;
}

/* ── Selector visual RAL ── */
body.conpex-shop .conpex-ral-toggle{
  display:inline-flex !important;align-items:center;flex:none;white-space:nowrap;
  background:#fff !important;border:1px solid #c5d5e4 !important;border-radius:var(--cpx-r-btn) !important;
  padding:9px 14px !important;font-size:.82rem !important;font-weight:600 !important;
  color:var(--cpx-blue) !important;cursor:pointer;box-shadow:none !important;min-height:0 !important;
  margin:0 !important;
}
body.conpex-shop .conpex-ral-toggle:hover{background:#f2f7fb !important}

body.conpex-shop .conpex-ral-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
}
body.conpex-shop .conpex-ral-head-t{font-weight:700;font-size:.85rem;color:var(--cpx-blue)}
body.conpex-shop .conpex-ral-cerrar{
  background:none !important;border:0 !important;box-shadow:none !important;margin:0 !important;
  padding:2px 8px !important;min-height:0 !important;cursor:pointer;
  font-size:1.35rem !important;line-height:1 !important;color:var(--cpx-muted) !important;
}
body.conpex-shop .conpex-ral-cerrar:hover{color:var(--cpx-ink) !important}

body.conpex-shop .conpex-ral-panel{
  margin-top:12px;background:#fff;border:1px solid var(--cpx-line);
  border-radius:var(--cpx-r-card);padding:16px;
}
body.conpex-shop .conpex-ral-panel[hidden]{display:none !important}

body.conpex-shop .conpex-ral-bar{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
body.conpex-shop .conpex-ral-buscar{
  width:100% !important;border:1px solid var(--cpx-line) !important;border-radius:var(--cpx-r-btn) !important;
  padding:9px 12px !important;font-size:.88rem !important;margin:0 !important;min-height:0 !important;
  background:var(--cpx-surface-2) !important;color:var(--cpx-ink) !important;
}
body.conpex-shop .conpex-ral-buscar:focus{outline:2px solid var(--cpx-accent);outline-offset:1px}

body.conpex-shop .conpex-ral-fams{display:flex;flex-wrap:wrap;gap:6px}
body.conpex-shop .conpex-ral-chip{
  background:var(--cpx-surface-2) !important;border:0 !important;border-radius:999px !important;
  padding:6px 13px !important;font-size:.74rem !important;font-weight:600 !important;
  color:var(--cpx-ink-2) !important;cursor:pointer;box-shadow:none !important;min-height:0 !important;
  margin:0 !important;white-space:nowrap;
}
body.conpex-shop .conpex-ral-chip[aria-pressed="true"]{background:var(--cpx-ink) !important;color:#fff !important}
body.conpex-shop .conpex-ral-chip:hover{background:#e4e5e0 !important}
body.conpex-shop .conpex-ral-chip[aria-pressed="true"]:hover{background:var(--cpx-ink) !important}

body.conpex-shop .conpex-ral-grid{
  display:grid !important;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;
  max-height:280px;overflow-y:auto;padding:2px;
}
body.conpex-shop .conpex-ral-sw{
  display:flex !important;flex-direction:column;align-items:center;gap:5px;
  background:none !important;border:0 !important;padding:4px !important;cursor:pointer;
  box-shadow:none !important;margin:0 !important;min-height:0 !important;border-radius:6px !important;
  transition:background .12s;
}
body.conpex-shop .conpex-ral-sw:hover{background:var(--cpx-surface-2) !important}
body.conpex-shop .conpex-ral-color{
  width:100%;aspect-ratio:1/1;border-radius:6px;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
body.conpex-shop .conpex-ral-code{
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;font-size:.63rem !important;
  color:var(--cpx-muted) !important;font-weight:500 !important;
}
body.conpex-shop .conpex-ral-vacio{grid-column:1/-1;font-size:.85rem;color:var(--cpx-muted);padding:20px 0;text-align:center}

body.conpex-shop .conpex-ral-disclaimer{
  margin:12px 0 0 !important;padding-top:12px;border-top:1px solid var(--cpx-line);
  font-size:.76rem !important;color:var(--cpx-muted) !important;line-height:1.5;max-width:none !important;
}

/* ── Cantidad + agregar al carrito ── */
body.conpex-shop form.cart{
  display:flex !important;flex-wrap:wrap;gap:12px;align-items:stretch;margin:20px 0 0 !important;
}
/* Pastilla − 1 + : mismo radio y sombra que el botón de al lado, para que
   se lean como una sola pieza de compra. */
body.conpex-shop .quantity{
  margin:0 !important;display:flex !important;align-items:stretch;
  background:var(--cpx-surface);border:1px solid var(--cpx-line);
  border-radius:var(--cpx-r-cta);flex:none;overflow:hidden;
}
body.conpex-shop .conpex-qty-btn{
  width:44px !important;flex:none;display:flex !important;align-items:center;justify-content:center;
  background:var(--cpx-surface-2) !important;border:0 !important;box-shadow:none !important;
  margin:0 !important;padding:0 !important;min-height:0 !important;
  font-family:Archivo,sans-serif !important;font-size:1.15rem !important;font-weight:600 !important;
  color:var(--cpx-ink-2) !important;cursor:pointer;line-height:1 !important;
  transition:background .12s,color .12s;
}
body.conpex-shop .conpex-qty-btn:hover{background:var(--cpx-line) !important;color:var(--cpx-ink) !important}
body.conpex-shop .conpex-qty-minus{border-radius:0 !important}
body.conpex-shop .conpex-qty-plus{border-radius:0 !important}
/* El tema fuerza width:100% y margin-bottom en input[type=number] */
body.conpex-shop .quantity input.qty,
body.conpex-shop .quantity input[type=number].qty{
  width:52px !important;height:48px !important;min-height:0 !important;
  border:0 !important;background:var(--cpx-surface) !important;box-shadow:none !important;
  margin:0 !important;padding:0 !important;text-align:center !important;
  border-radius:0 !important;
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  font-size:.98rem !important;color:var(--cpx-ink) !important;
  -moz-appearance:textfield !important;
}
body.conpex-shop .quantity input.qty::-webkit-outer-spin-button,
body.conpex-shop .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none !important;margin:0 !important}

body.conpex-shop form.cart .single_add_to_cart_button,
body.conpex-shop form.cart button.single_add_to_cart_button.button{
  flex:1;min-width:230px;
  display:flex !important;align-items:center;justify-content:center;gap:10px;
  background:var(--cpx-accent) !important;color:#fff !important;
  border:0 !important;border-radius:var(--cpx-r-cta) !important;
  box-shadow:var(--cpx-sh-cta) !important;
  font-weight:700 !important;font-size:1.02rem !important;
  min-height:48px !important;padding:0 22px !important;margin:0 !important;
  text-transform:none !important;letter-spacing:0 !important;
  transition:background .15s,box-shadow .15s,transform .08s;
}
body.conpex-shop .single_add_to_cart_button svg{
  width:19px;height:19px;flex:none;stroke:#fff;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
body.conpex-shop form.cart .single_add_to_cart_button:hover{
  background:var(--cpx-accent-dk) !important;
  box-shadow:0 6px 18px rgba(255,122,0,.34) !important;
}
body.conpex-shop form.cart .single_add_to_cart_button:active{transform:translateY(1px)}
body.conpex-shop form.cart .single_add_to_cart_button.disabled,
body.conpex-shop form.cart .single_add_to_cart_button.wc-variation-selection-needed,
body.conpex-shop form.cart .single_add_to_cart_button.conpex-color-pendiente{
  background:var(--cpx-surface-2) !important;color:#a9adb1 !important;
  box-shadow:none !important;cursor:not-allowed;
}
/* El ícono va blanco sobre naranja; en el estado apagado se atenúa con el
   resto del botón en vez de quedar un blanco suelto sobre gris. */
body.conpex-shop .single_add_to_cart_button.disabled svg,
body.conpex-shop .single_add_to_cart_button.wc-variation-selection-needed svg,
body.conpex-shop .single_add_to_cart_button.conpex-color-pendiente svg{
  stroke:#a9adb1 !important;
}
/*
 * El campo de color se imprime en este mismo contenedor (hook
 * woocommerce_before_add_to_cart_button), como hermano de la cantidad y
 * el botón — no dentro de una fila propia. Con esto en flex-wrap, tenerlo
 * visible o no cambiaba cómo se repartía el espacio entre cantidad y
 * botón en su misma fila, y el botón terminaba con anchos distintos según
 * el estado. Por eso ya no es flex aquí: cantidad y botón se agrupan
 * aparte, en su propia fila (.conpex-buy-row, agregada por JS), inmune a
 * lo que haya arriba.
 */
body.conpex-shop .woocommerce-variation-add-to-cart{
  display:block !important;width:100%;
}
body.conpex-shop .conpex-buy-row{
  display:flex !important;flex-wrap:wrap;gap:12px;width:100%;align-items:stretch;margin-top:20px;
}
body.conpex-shop .conpex-colorfield + .conpex-buy-row{margin-top:14px}
body.conpex-shop .woocommerce-variation{width:100%}
body.conpex-shop .woocommerce-variation-description p{margin:0 0 8px;color:var(--cpx-ink-2)}

/* ── Documentos ── */
body.conpex-shop .conpex-docs{display:grid !important;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}
body.conpex-shop .conpex-doc{
  background:var(--cpx-surface) !important;border:1px solid var(--cpx-line) !important;
  border-radius:var(--cpx-r-btn) !important;
  padding:13px 16px !important;display:flex !important;align-items:center;justify-content:center;gap:10px;
  font-weight:700 !important;font-size:.87rem !important;text-align:center;
  color:var(--cpx-ink) !important;text-decoration:none !important;
  box-shadow:var(--cpx-sh) !important;margin:0 !important;
  transition:background .15s,border-color .15s,color .15s;
}
body.conpex-shop .conpex-doc:hover{
  background:var(--cpx-ink) !important;border-color:var(--cpx-ink) !important;color:#fff !important;
}
body.conpex-shop .conpex-doc:hover svg{stroke:#fff}
body.conpex-shop .conpex-doc svg{
  width:19px;height:19px;flex:none;stroke:var(--cpx-ink);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* =========================================================================
   7. PESTAÑAS
   ========================================================================= */

body.conpex-shop .woocommerce-tabs{
  background:var(--cpx-surface);border-radius:var(--cpx-r-card);
  box-shadow:var(--cpx-sh);margin-top:34px !important;overflow:hidden;padding:0 !important;
}
body.conpex-shop .woocommerce-tabs ul.tabs{
  border-bottom:1px solid var(--cpx-line) !important;
  display:flex !important;gap:4px;overflow-x:auto;padding:0 8px !important;
}
body.conpex-shop .woocommerce-tabs ul.tabs li{
  background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;
}
body.conpex-shop .woocommerce-tabs ul.tabs li a{
  display:block !important;padding:16px 18px !important;
  font-weight:700 !important;font-size:.75rem !important;
  letter-spacing:.09em !important;text-transform:uppercase !important;
  color:var(--cpx-muted) !important;
  border-bottom:3px solid transparent !important;white-space:nowrap;
  text-decoration:none !important;
}
body.conpex-shop .woocommerce-tabs ul.tabs li.active a,
body.conpex-shop .woocommerce-tabs ul.tabs li a:hover{color:var(--cpx-ink) !important}
body.conpex-shop .woocommerce-tabs ul.tabs li.active a{border-bottom-color:var(--cpx-accent) !important}
body.conpex-shop .woocommerce-tabs .panel{
  padding:26px 24px !important;margin:0 !important;
  background:none !important;border:0 !important;box-shadow:none !important;
}
body.conpex-shop .woocommerce-tabs .panel > h2{
  font-size:1.16rem !important;font-weight:700 !important;
  margin:0 0 12px !important;color:var(--cpx-ink) !important;
  text-transform:none !important;
}
body.conpex-shop .woocommerce-tabs .panel p{color:var(--cpx-ink-2);max-width:64ch;margin:0 0 12px}

/* Los botones de acordeón los inyecta el JS siempre, pero solo se usan
   en móvil: en escritorio mandan las pestañas. */
body.conpex-shop .conpex-acc{display:none}

/* Tabla de especificaciones */
body.conpex-shop table.conpex-specs,
body.conpex-shop .shop_attributes{
  width:100% !important;max-width:760px;border-collapse:collapse !important;border:0 !important;
}
body.conpex-shop table.conpex-specs th,
body.conpex-shop table.conpex-specs td,
body.conpex-shop .shop_attributes th,
body.conpex-shop .shop_attributes td{
  padding:11px 0 !important;border:0 !important;
  border-bottom:1px solid var(--cpx-line) !important;
  vertical-align:top;text-align:left !important;background:none !important;
  font-style:normal !important;
}
body.conpex-shop table.conpex-specs th,
body.conpex-shop .shop_attributes th{
  font-weight:600 !important;color:var(--cpx-ink-2) !important;
  width:250px;padding-right:20px !important;
}
body.conpex-shop table.conpex-specs td,
body.conpex-shop .shop_attributes td{
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  font-size:.87rem !important;color:var(--cpx-ink) !important;
}
body.conpex-shop .shop_attributes td p{margin:0 !important;padding:0 !important}
body.conpex-shop .conpex-specs-nota{font-size:.84rem;color:var(--cpx-muted);margin-top:14px;max-width:64ch}

/* =========================================================================
   8. LISTADO DE TIENDA
   ========================================================================= */

body.conpex-shop ul.products{display:grid !important;gap:16px}
body.conpex-shop.columns-3 ul.products,
body.conpex-shop ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
body.conpex-shop ul.products li.product{
  width:100% !important;margin:0 !important;float:none !important;clear:none !important;
  background:var(--cpx-surface) !important;border-radius:var(--cpx-r-card) !important;
  box-shadow:var(--cpx-sh) !important;overflow:hidden;
  display:flex !important;flex-direction:column;padding:0 !important;
  transition:transform .16s,box-shadow .16s;
}
body.conpex-shop ul.products li.product:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(10,11,12,.05),0 14px 30px -14px rgba(10,11,12,.20) !important;
}
body.conpex-shop ul.products li.product a img{
  margin:0 !important;border-radius:0 !important;width:100%;
  aspect-ratio:4/3;object-fit:contain;
  background:linear-gradient(160deg,#f7f8f6,#e6e8e4);padding:14px;
}
body.conpex-shop ul.products li.product .conpex-card-cat{
  display:inline-block;margin:14px 15px 0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cpx-blue);background:var(--cpx-blue-soft);padding:3px 7px;border-radius:4px;
}
body.conpex-shop ul.products li.product .woocommerce-loop-product__title{
  font-size:.98rem !important;font-weight:700 !important;line-height:1.28 !important;
  padding:8px 15px 0 !important;margin:0 !important;
  color:var(--cpx-ink) !important;text-transform:none !important;
}
body.conpex-shop ul.products li.product .price{
  display:block !important;padding:6px 15px 0 !important;margin:0 !important;
  color:var(--cpx-accent) !important;font-weight:800 !important;
  font-size:1.05rem !important;font-variant-numeric:tabular-nums;
}
body.conpex-shop ul.products li.product .price del{opacity:.45;font-size:.8em;font-weight:600}
body.conpex-shop ul.products li.product .price .from{color:var(--cpx-muted);font-size:.72rem;font-weight:600}
body.conpex-shop ul.products li.product .button.added,
body.conpex-shop ul.products li.product a.added_to_cart{display:none !important}

body.conpex-shop .conpex-card-actions{
  display:flex !important;gap:8px;padding:14px 15px 16px;margin-top:auto;
}
body.conpex-shop .conpex-btn{
  flex:1;display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
  border:0 !important;border-radius:var(--cpx-r-btn) !important;
  padding:10px 12px !important;margin:0 !important;cursor:pointer;
  font-weight:600 !important;font-size:.85rem !important;
  text-decoration:none !important;line-height:1.3 !important;
  box-shadow:none !important;min-height:0 !important;
  transition:background .15s,color .15s,box-shadow .15s;
}
body.conpex-shop .conpex-btn svg{
  width:17px;height:17px;flex:none;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
body.conpex-shop .conpex-btn-ghost{background:var(--cpx-surface-2) !important;color:var(--cpx-ink-2) !important}
body.conpex-shop .conpex-btn-ghost:hover{background:var(--cpx-ink) !important;color:#fff !important}
body.conpex-shop .conpex-btn-ghost svg{stroke:currentColor}
body.conpex-shop .conpex-btn-primary{
  background:var(--cpx-accent) !important;color:#fff !important;
  box-shadow:var(--cpx-sh-cta) !important;
}
body.conpex-shop .conpex-btn-primary:hover{background:var(--cpx-accent-dk) !important;color:#fff !important}
body.conpex-shop .conpex-btn-primary svg{stroke:#fff}

/* Encabezado del listado */
body.conpex-shop .woocommerce-products-header__title{
  font-size:clamp(1.6rem,3vw,2.2rem) !important;font-weight:800 !important;
  letter-spacing:-.02em;margin:0 0 6px !important;text-transform:none !important;
}
body.conpex-shop .woocommerce-result-count{color:var(--cpx-muted) !important;font-size:.86rem}
body.conpex-shop .woocommerce-ordering select{
  border:1px solid var(--cpx-line) !important;border-radius:var(--cpx-r-btn) !important;
  padding:8px 12px !important;background:#fff !important;min-height:0 !important;
}
body.conpex-shop .related > h2,
body.conpex-shop .up-sells > h2{
  font-size:1.24rem !important;font-weight:700 !important;
  margin:34px 0 15px !important;text-transform:none !important;
}

/* =========================================================================
   9. MODAL DE VARIACIONES
   ========================================================================= */

body.conpex-shop .conpex-modal{
  position:fixed;inset:0;z-index:99999;
  display:flex !important;align-items:center;justify-content:center;padding:18px;
}
body.conpex-shop .conpex-modal[hidden]{display:none !important}
body.conpex-shop .conpex-modal-backdrop{position:absolute;inset:0;background:rgba(10,11,12,.55)}
body.conpex-shop .conpex-modal-box{
  position:relative;background:var(--cpx-surface);border-radius:var(--cpx-r-card);
  box-shadow:0 24px 60px -20px rgba(10,11,12,.5);
  width:100%;max-width:480px;max-height:88vh;overflow-y:auto;padding:26px;
}
body.conpex-shop .conpex-modal-box h3{
  font-size:1.22rem !important;font-weight:700 !important;
  margin:0 26px 16px 0 !important;line-height:1.25 !important;text-transform:none !important;
}
body.conpex-shop .conpex-modal-x{
  position:absolute;top:12px;right:14px;background:none !important;border:0 !important;
  cursor:pointer;font-size:1.7rem;line-height:1;color:var(--cpx-muted) !important;
  padding:4px 8px !important;box-shadow:none !important;
}
body.conpex-shop .conpex-modal-x:hover{color:var(--cpx-ink) !important}
body.conpex-shop .conpex-modal-loading{color:var(--cpx-muted);font-size:.9rem;padding:14px 0}
body.conpex-shop .conpex-modal .single_add_to_cart_button{width:100%;min-width:0}
body.conpex-shop .conpex-modal-link{
  display:block;margin-top:14px;text-align:center;
  font-size:.85rem;color:var(--cpx-muted) !important;
}

/* =========================================================================
   10. RESPONSIVE
   ========================================================================= */

/* 1000px: solo el ajuste de rejilla (ficha a una columna, listado a 2).
   El menú de hamburguesa NO se activa aquí — antes se activaba desde 1000px
   y el menú horizontal completo (3 enlaces) todavía cabe en ese ancho, así
   que se veía una laptop normal con el ícono de hamburguesa de sobra. Todo
   lo de navegación se movió al corte de 720px, junto con el resto de lo
   que sí es exclusivamente móvil. */
@media (max-width:1000px){
  /* minmax(0,1fr) y no 1fr a secas: una pista de rejilla tiene por defecto
     un mínimo del tamaño de su contenido, así que con «1fr» la columna
     crecía hasta caber la fila de miniaturas (~580px) y estiraba la página
     entera, provocando scroll lateral en todo el sitio en vez de solo
     dentro de la galería. */
  body.conpex-shop div.product{grid-template-columns:minmax(0,1fr);gap:26px}
  body.conpex-shop.columns-3 ul.products,
  body.conpex-shop ul.products.columns-3{grid-template-columns:repeat(2,1fr)}
  /* Rango intermedio (721–1000px): el menú se conserva, solo se afloja
     el buscador y se quita el eslogan para que quepa sin traslape. */
  body.conpex-shop .conpex-search{width:170px}
  body.conpex-shop .conpex-tagline{display:none}
  body.conpex-shop .conpex-nav ul{gap:14px}
}

@media (max-width:720px){
  body.conpex-shop #primary,
  body.conpex-shop #primary.content-area{padding:20px 16px 48px !important}

  /* Red de seguridad, no el arreglo en sí: las causas reales del scroll
     lateral se corrigieron arriba (minmax(0,1fr) en la rejilla, min-width:0
     en las columnas y recorte en la franja de confianza). Esto solo evita
     que cualquier desbordamiento futuro dentro del contenido de tienda
     vuelva a empujar el ancho de toda la página en un teléfono.
     `clip` no crea contenedor de scroll — `hidden` queda de respaldo para
     navegadores que no lo soporten. Las miniaturas siguen desplazándose
     por su cuenta: recortar en un ancestro no afecta el scroll propio de
     un descendiente. */
  body.conpex-shop #primary{overflow-x:hidden;overflow-x:clip}

  /* Cabecera compacta */
  body.conpex-shop .conpex-hdr-in{padding:12px 16px;gap:12px}
  body.conpex-shop .conpex-search{display:none}
  body.conpex-shop .conpex-mark{font-size:1.14rem}

  /* Menú → hamburguesa. Solo aquí, no desde 1000px
     (.conpex-tagline ya viene oculto desde el bloque de 1000px). */
  body.conpex-shop .conpex-nav{display:none !important}
  body.conpex-shop .conpex-burger{display:grid !important}
  body.conpex-shop .conpex-tools{margin-left:auto}
  body.conpex-shop .conpex-mnav[hidden]{display:none !important}
  body.conpex-shop .conpex-mnav{
    display:block;background:#16191c;border-top:1px solid #2a2e32;padding:14px 16px 18px;
  }
  body.conpex-shop .conpex-mnav ul{
    display:block !important;margin:0 !important;padding:0 !important;list-style:none !important;
  }
  body.conpex-shop .conpex-mnav li{margin:0 !important;padding:0 !important;list-style:none !important}
  body.conpex-shop .conpex-mnav a{
    display:block;padding:12px 0;color:#e8eaec !important;text-decoration:none !important;
    font-weight:600;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
    border-bottom:1px solid #24282c;
  }
  body.conpex-shop .conpex-mnav a:hover{color:var(--cpx-accent) !important}
  body.conpex-shop .conpex-search-m{width:100%;margin-bottom:12px}

  /* Franja de confianza: carrusel automático en bucle, lento y continuo.
     Con los 4 puntos apretados en una pantalla angosta casi no se alcanzan
     a leer aunque haya scroll manual — así se ven todos solos, sin que el
     cliente tenga que descubrir que se puede deslizar. Las dos copias del
     track (ver PHP) se animan sincronizadas: cuando la primera termina de
     salir por la izquierda, la segunda ya está exactamente donde empezó
     la primera, así que el reinicio del bucle no se nota. */
  body.conpex-shop .conpex-trust-in{
    display:flex;grid-template-columns:none;gap:0;padding:12px 0;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  }
  body.conpex-shop .conpex-trust-track{
    display:flex !important;flex:none;
    animation:conpexTrustLoop 26s linear infinite;
  }
  body.conpex-shop .conpex-trust-track[aria-hidden]{display:flex !important}
  body.conpex-shop .conpex-trust-i{flex:0 0 auto;padding:0 26px}
  @keyframes conpexTrustLoop{
    from{transform:translateX(0)}
    to{transform:translateX(-100%)}
  }
  @media (prefers-reduced-motion:reduce){
    body.conpex-shop .conpex-trust-track{animation:none}
    body.conpex-shop .conpex-trust-in{overflow-x:auto}
    body.conpex-shop .conpex-trust-track[aria-hidden]{display:none !important}
  }

  /* Pie apilado */
  body.conpex-shop .conpex-ftr-in{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 16px}
  body.conpex-shop .conpex-ftr-tag,
  body.conpex-shop .conpex-ftr-tel{border-left:0;padding-left:0}
  body.conpex-shop .conpex-ftr-nav{margin-left:0}
  body.conpex-shop .conpex-ftr-tel{flex-direction:column;gap:9px}
  body.conpex-shop div.product{gap:22px}
  body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs{gap:8px}
  body.conpex-shop .woocommerce-product-gallery .flex-control-thumbs li{width:72px !important}

  body.conpex-shop form.cart{flex-direction:column;gap:10px}
  /* Cantidad y botón en el mismo renglón también en móvil — la pastilla de
     cantidad mide lo justo (140px) y el botón llena el resto con flex:1;
     no hace falta apilarlos. Antes la cantidad se estiraba a 100% y el
     botón se apilaba debajo por su cuenta. */
  body.conpex-shop .conpex-buy-row{margin-top:14px;flex-wrap:nowrap}
  body.conpex-shop .conpex-buy-row .single_add_to_cart_button{
    flex:1;min-width:0 !important;min-height:52px !important;
  }
  body.conpex-shop .conpex-docs{grid-template-columns:1fr}
  body.conpex-shop .conpex-ral-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));max-height:240px}
  /* Ya no hay <h2> adentro del panel (se quitó por repetir el título del
     acordeón), así que su margen ya no le daba aire al contenido por
     arriba. Se le da su propio padding superior en vez de dejarlo a 0. */
  body.conpex-shop .woocommerce-tabs .panel{padding:20px 18px 26px !important}
  body.conpex-shop table.conpex-specs th,
  body.conpex-shop .shop_attributes th{width:44%;padding-right:12px !important;font-size:.88rem !important}

  /* Pestañas → acordeón */
  body.conpex-shop .woocommerce-tabs ul.tabs{display:none !important}
  body.conpex-shop .woocommerce-tabs .panel{display:none !important;border-top:1px solid var(--cpx-line) !important}
  body.conpex-shop .woocommerce-tabs .panel.conpex-open{display:block !important}
  body.conpex-shop .conpex-acc{
    display:flex !important;width:100%;align-items:center;justify-content:space-between;gap:12px;
    padding:17px 18px !important;background:none !important;
    border:0 !important;border-top:1px solid var(--cpx-line) !important;
    font-family:Archivo,"Arial Narrow",Helvetica,sans-serif !important;
    font-weight:700 !important;font-size:.94rem !important;letter-spacing:.02em;
    text-align:left;cursor:pointer;color:var(--cpx-ink) !important;
    box-shadow:none !important;margin:0 !important;text-transform:none !important;
  }
  body.conpex-shop .conpex-acc:first-of-type{border-top:0 !important}
  body.conpex-shop .conpex-acc::after{
    content:"" !important;display:block !important;
    width:9px;height:9px;flex:none;
    border-right:2px solid var(--cpx-ink-2);border-bottom:2px solid var(--cpx-ink-2);
    transform:rotate(45deg) translateY(-2px);transition:transform .2s;
  }
  body.conpex-shop .conpex-acc[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}

  body.conpex-shop.columns-3 ul.products,
  body.conpex-shop ul.products.columns-3{grid-template-columns:1fr}

  /* Barra fija de compra */
  body.conpex-shop .conpex-stickybar{
    position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fff;
    box-shadow:0 -2px 16px rgba(10,11,12,.12);padding:10px 16px;
    display:flex !important;align-items:center;gap:14px;
    transform:translateY(110%);transition:transform .22s ease;
  }
  body.conpex-shop .conpex-stickybar.conpex-on{transform:none}
  body.conpex-shop .conpex-stickybar .cpx-p{flex:none;line-height:1.15}
  body.conpex-shop .conpex-stickybar .cpx-p b{
    display:block;font-weight:800;font-size:1.1rem;color:var(--cpx-accent);
    font-variant-numeric:tabular-nums;
  }
  body.conpex-shop .conpex-stickybar .cpx-p span{
    display:block;font-size:.66rem;color:var(--cpx-muted);
    font-family:"IBM Plex Mono",ui-monospace,monospace;
  }
  body.conpex-shop .conpex-stickybar button{
    flex:1;background:var(--cpx-accent) !important;color:#fff !important;
    border:0 !important;border-radius:var(--cpx-r-cta) !important;
    min-height:46px !important;font-weight:700 !important;font-size:.95rem !important;
    cursor:pointer;box-shadow:var(--cpx-sh-cta) !important;
    text-transform:none !important;margin:0 !important;
  }
  body.conpex-shop.single-product .footer{padding-bottom:76px !important}
}

@media (prefers-reduced-motion:reduce){
  body.conpex-shop *{animation:none !important;transition:none !important}
}