/* ================================================================
   REPUESTOTENERIFE — CSS del rediseño de home (fase 1)
   Bloques: HERO + REPUESTOS MÁS PEDIDOS (ps_bestsellers)

   DÓNDE PEGARLO (una de estas dos opciones):
   a) Archivo custom.css del tema:
      /themes/electron/assets/css/custom.css
      (crear si no existe; el tema lo carga automáticamente en PS 8)
   b) O si Electron trae panel de "Custom CSS" en su configuración
      de tema, pegarlo ahí.

   NOTA: todas las clases llevan prefijo "rt-" para no chocar
   con los estilos del tema Electron.
   ================================================================ */

/* ── HERO ─────────────────────────────────────────────────────── */
.rt-hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  position: relative;
  overflow: hidden;
}
.rt-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.rt-hero-content { flex: 1; z-index: 2; position: relative; }
.rt-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FF0100;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.rt-hero-title {
  font-family: 'Roboto', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 14px;
}
.rt-hero-title span { color: #FF0100; }
.rt-hero-desc {
  font-size: 15px;
  color: #bbb;
  margin-bottom: 28px;
  max-width: 480px;
  line-height: 1.6;
}

/* Buscador del hero (form funcional) */
.rt-hero-search {
  display: flex;
  max-width: 520px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #FF0100;
  background: #fff;
  margin: 0;
}
.rt-hero-search input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 13px 16px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  color: #222;
  background: #fff;
  box-shadow: none;
  height: auto;
}
.rt-hero-search input[type="text"]::placeholder { color: #aaa; }
.rt-hero-search button {
  background: #FF0100;
  border: none;
  padding: 0 22px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: background .2s;
  border-radius: 0;
}
.rt-hero-search button:hover { background: #cc0100; }

.rt-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.rt-hero-tag {
  background: rgba(255,255,255,0.08);
  color: #bbb;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-block;
}
.rt-hero-tag:hover {
  background: rgba(255,1,0,0.15);
  color: #ff6666;
  border-color: rgba(255,1,0,0.3);
  text-decoration: none;
}

/* Visual lateral con estadísticas */
.rt-hero-visual {
  flex-shrink: 0;
  width: 320px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.rt-hero-visual-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,1,0,0.12) 0%, transparent 70%);
}
.rt-hero-visual-box {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  z-index: 1;
}
.rt-stat-row {
  display: flex;
  gap: 24px;
}
.rt-hero-stat { text-align: center; }
.rt-hero-stat .val {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.rt-hero-stat .val span { color: #FF0100; }
.rt-hero-stat .lbl { font-size: 11px; color: #888; margin-top: 4px; }

/* ── SECCIÓN / CABECERAS ──────────────────────────────────────── */
.rt-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}
.rt-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #FF0100;
}
.rt-sec-label {
  font-size: 11px;
  color: #FF0100;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.rt-sec-title {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #222;
}
.rt-sec-title span { color: #FF0100; }
.rt-see-all {
  font-size: 13px;
  color: #FF0100;
  font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
  text-decoration: none;
}
.rt-see-all:hover { color: #cc0100; text-decoration: underline; }

/* ── TARJETAS DE PRODUCTO (ps_bestsellers y reutilizable) ─────── */
.rt-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.rt-prod-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  transition: all .2s;
  display: flex;
  flex-direction: column;
}
.rt-prod-card:hover {
  border-color: #FF0100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  text-decoration: none;
}
.rt-prod-img {
  background: #f8f8f8;
  height: 170px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.rt-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  mix-blend-mode: multiply;
}
.rt-prod-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #FF0100;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 2px;
}
.rt-prod-info { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.rt-prod-brand {
  font-size: 10px;
  color: #FF0100;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.rt-prod-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  flex: 1;
  margin-bottom: 4px;
}
.rt-prod-ref { font-size: 10px; color: #bbb; margin-bottom: 10px; }
.rt-prod-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 14px;
  border-top: 1px solid #f0f0f0;
}
.rt-prod-price {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #222;
}
.rt-prod-actions {
  display: flex;
  gap: 6px;
}
.rt-add-btn {
  width: 34px; height: 34px;
  background: #FF0100;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  text-decoration: none;
}
.rt-prod-card:hover .rt-add-btn { background: #cc0100; }
/* Vista rápida: mismo look que el botón de carrito, pero en gris para diferenciar la acción secundaria */
.rt-add-btn-quickview {
  background: #333;
}
.rt-prod-card:hover .rt-add-btn-quickview { background: #000; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 992px) {
  .rt-hero-visual { display: none; }
  .rt-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .rt-hero-title { font-size: 28px; }
  .rt-hero-inner { padding: 36px 16px; }
  .rt-products-grid { grid-template-columns: repeat(2, 1fr); }
  .rt-sec-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 480px) {
  .rt-hero-search { flex-direction: column; border-radius: 6px; }
  .rt-hero-search button { padding: 12px; justify-content: center; }
  .rt-products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rt-prod-img { height: 130px; }
}

/* ── BARRA DE CONFIANZA (encima del hero) ─────────────────────── */
.rt-trust-bar {
  background: #f8f8f8;
  border-bottom: 1px solid #ebebeb;
  padding: 10px 0;
}
.rt-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  gap: 0;
}
.rt-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
  font-weight: 600;
  padding: 0 28px;
  border-right: 1px solid #ddd;
}
.rt-trust-item:first-child { border-left: 1px solid #ddd; }
.rt-trust-item svg { color: #FF0100; flex-shrink: 0; }

@media (max-width: 992px) {
  .rt-trust-inner { flex-wrap: wrap; gap: 8px 0; justify-content: flex-start; }
  .rt-trust-item { padding: 0 14px; }
}
@media (max-width: 600px) {
  /* En móvil: 2 columnas compactas sin bordes */
  .rt-trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .rt-trust-item { border: none !important; padding: 0; font-size: 11px; }
}
/* ================================================================
   REPUESTOTENERIFE — CSS CABECERA (fase 2)
   PEGAR AL FINAL de:
   /themes/child_v1_electron_1/assets/css/custom.css
   ================================================================ */

/* ── FRANJA 1: TOP-BAR negra ─────────────────────────────────── */
.rt-top-bar {
  background: #1a1a1a;
  padding: 7px 0;
  font-size: 12px;
}
.rt-top-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rt-top-left, .rt-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #999;
}
.rt-top-left a, .rt-top-right a {
  color: #ccc;
  text-decoration: none;
}
.rt-top-left a:hover, .rt-top-right a:hover { color: #fff; }
.rt-top-sep { color: #444; }
.rt-top-phone {
  display: flex; align-items: center; gap: 5px;
  color: #fff !important;
  font-weight: 700;
}
.rt-top-phone svg { color: #FF0100; }

/* ── FRANJA 2: HEADER principal ──────────────────────────────── */
.rt-main-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 16px 0;
}
.rt-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.rt-logo img {
  max-height: 52px;
  width: auto;
}

/* Buscador central: estiliza el módulo de búsqueda del tema */
.rt-header-search {
  flex: 1;
  max-width: 560px;
}
.rt-header-search form,
.rt-header-search .tvsearch-form,
.rt-header-search .search-widget form {
  display: flex;
  width: 100%;
  border: 2px solid #FF0100;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
}
.rt-header-search input[type="text"],
.rt-header-search input[type="search"] {
  flex: 1;
  border: none !important;
  outline: none;
  padding: 11px 14px;
  font-size: 13px;
  color: #222;
  background: #fff;
  box-shadow: none !important;
  height: auto;
  min-height: 0;
}
.rt-header-search button[type="submit"] {
  background: #FF0100;
  border: none;
  color: #fff;
  padding: 0 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0;
  transition: background .2s;
}
.rt-header-search button[type="submit"]:hover { background: #cc0100; }
.rt-header-search button[type="submit"] svg,
.rt-header-search button[type="submit"] i {
  color: #fff;
  fill: #fff;
  font-size: 18px;
}

/* Acciones derecha */
.rt-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.rt-h-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
}
.rt-h-btn:hover { color: #FF0100; }
.rt-h-btn svg { color: #333; }
.rt-h-btn:hover svg { color: #FF0100; }

/* Carrito (markup del módulo TV: estilos genéricos sobre el contenedor) */
.rt-cart { position: relative; }
.rt-cart a, .rt-cart button { color: #333; font-size: 13px; font-weight: 600; }
.rt-cart .cart-products-count,
.rt-cart .tvcart-count,
.rt-cart .badge {
  background: #FF0100 !important;
  color: #fff !important;
  border-radius: 50%;
  font-size: 10px;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  display: inline-block;
}

/* Botón WhatsApp */
.rt-wa-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #25D366;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background .2s;
  white-space: nowrap;
}
.rt-wa-btn:hover { background: #1eb857; }

/* ── FRANJA 3: NAV categorías ────────────────────────────────── */
.rt-nav {
  background: #FF0100;
}
.rt-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Enlaces del megamenu TV: aplanado a estilo barra roja */
.rt-nav .rt-nav-menu a {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.rt-nav .rt-nav-menu > div a:hover { background: rgba(0,0,0,0.15); }

.rt-delivery-info {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding-left: 16px;
}
.rt-dot {
  width: 8px; height: 8px;
  background: #4ade80;
  border-radius: 50%;
  display: inline-block;
  animation: rt-pulse 2s infinite;
}
@keyframes rt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Sticky del tema: al fijarse, mantiene el fondo rojo */
.tvcmsheader-sticky.rt-nav.tvcms-sticky,
.rt-nav.sticky {
  background: #FF0100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
/* ================================================================
   REPUESTOTENERIFE — AJUSTES FINOS CABECERA (fase 2b)
   Selectores exactos sobre el markup real de los módulos TV.
   PEGAR AL FINAL de custom.css (después de todo lo anterior).
   ================================================================ */

/* ── BUSCADOR ────────────────────────────────────────────────── */

/* Fuera el icono-toggle flotante (modo búsqueda compacta que no usamos) */
.rt-header-search .tvheader-sarch-display { display: none !important; }

/* El contenedor del formulario siempre visible y a ancho completo */
.rt-header-search .tvsearch-header-display-wrappper {
  display: block !important;
  position: static !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* El form como caja roja integrada */
.rt-header-search .tvsearch-header-display-wrappper form {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  border: 2px solid #FF0100;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  margin: 0;
}
.rt-header-search .tvheader-top-search {
  flex: 1;
  display: flex;
}
.rt-header-search .tvheader-top-search-wrapper-info-box {
  width: 100%;
  display: flex;
}
.rt-header-search input.tvcmssearch-words {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 11px 14px !important;
  font-size: 13px;
  color: #222;
  background: #fff !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

/* Botón de búsqueda: rojo con lupa blanca */
.rt-header-search .tvheader-top-search-wrapper { display: flex; }
.rt-header-search button.tvheader-search-btn {
  background: #FF0100 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 20px !important;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  height: 100% !important;
  width: auto !important;
  transition: background .2s;
}
.rt-header-search button.tvheader-search-btn:hover { background: #cc0100 !important; }

/* Recolorear el SVG de la lupa (círculo amarillo inline → blanco) */
.rt-header-search button.tvheader-search-btn svg { width: 18px; height: 18px; }
.rt-header-search button.tvheader-search-btn svg circle {
  fill: transparent !important;
  stroke: #fff !important;
}
.rt-header-search button.tvheader-search-btn svg polygon { fill: #fff !important; }

/* Autocompletado: desplegable anclado bajo la caja */
.rt-header-search .tvsearch-result {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 2000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ── CARRITO ─────────────────────────────────────────────────── */

/* Contenedor compacto */
.rt-cart { position: relative; }
.rt-cart .tvheader-cart-wrapper { position: relative; }

/* Icono + contador en línea, tamaño contenido */
.rt-cart .tvcart-icon-text-wrapper {
  display: flex !important;
  align-items: center;
  position: relative;
}
.rt-cart .tv-cart-icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block;
}
/* Recolorear el relleno amarillo del icono a rojo corporativo */
.rt-cart .tv-cart-icon svg path[style*="FFD741"],
.rt-cart .tv-cart-icon svg path[style*="ffd741"] {
  fill: #FF0100 !important;
}

/* Contador como badge pequeño superpuesto al icono */
.rt-cart .tv-cart-cart-inner {
  position: absolute !important;
  top: -7px;
  right: -9px;
  margin: 0 !important;
  padding: 0 !important;
}
.rt-cart span.cart-products-count {
  background: #FF0100 !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  line-height: 17px !important;
  text-align: center;
  display: inline-block !important;
  padding: 0 3px !important;
}

/* Desplegable del carrito: oculto por defecto, flotante al activarse.
   (El tema alterna las clases active/inactive en .blockcart) */
.rt-cart .ttvcmscart-show-dropdown-right {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  z-index: 3000;
  padding: 14px;
}
.rt-cart .blockcart.active .ttvcmscart-show-dropdown-right {
  display: block;
}

/* ── CARRITO CON PRODUCTOS (vista 'classic') ───────────────────
   Antes sin estilar: cabecera, filas de producto, totales y botones */

/* Cabecera: título + contador + cerrar */
.rt-cart .ttvcart-close-title-count {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.rt-cart .ttvcart-top-title { flex: 1; }
.rt-cart .ttvcart-top-title h4 {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #222;
}
.rt-cart .ttvcart-counter .ttvcart-products-count {
  background: #f2f2f2;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 8px;
}
/* Botón cerrar: vacío en el HTML, se dibuja una X por CSS */
.rt-cart .ttvclose-cart {
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: none;
  background: #f2f2f2;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.rt-cart .ttvclose-cart:hover { background: #FF0100; }
.rt-cart .ttvclose-cart::before,
.rt-cart .ttvclose-cart::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px;
  height: 2px;
  background: #666;
  transition: background .15s;
}
.rt-cart .ttvclose-cart::before { transform: translate(-50%, -50%) rotate(45deg); }
.rt-cart .ttvclose-cart::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.rt-cart .ttvclose-cart:hover::before,
.rt-cart .ttvclose-cart:hover::after { background: #fff; }

/* Lista de productos: alto máximo con scroll si hay varios */
.rt-cart .ttvcart-product-content-box {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
.rt-cart .ttvcart-product-wrapper {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
}
.rt-cart .ttvcart-product-wrapper:last-child { border-bottom: none; }
.rt-cart .tvcart-product-list-img {
  width: 52px; height: 52px;
  flex-shrink: 0;
  background: #f8f8f8;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.rt-cart .tvcart-product-list-img img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.rt-cart .tvcart-product-content {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-right: 20px; /* deja hueco a la papelera */
}
.rt-cart .tvshoping-cart-dropdown-title .product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}
.rt-cart .tvcart-product-list-box {
  font-size: 11px;
  color: #999;
  margin: 3px 0;
}
.rt-cart .tvcart-product-list-box .product-qty { font-weight: 700; color: #666; margin-left: 3px; }
.rt-cart .tvcart-product-content .product-price {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #FF0100;
}
.rt-cart .tvcart-product-content .regular-price {
  font-size: 11px;
  color: #bbb;
  text-decoration: line-through;
  margin-left: 6px;
}
.rt-cart .tvcart-product-remove {
  position: absolute;
  top: 0; right: 0;
}
.rt-cart .tvcart-product-remove a {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: #bbb;
  transition: color .15s;
}
.rt-cart .tvcart-product-remove a:hover { color: #FF0100; }
.rt-cart .tvcart-product-remove i.material-icons { font-size: 17px; }

/* Totales */
.rt-cart .ttvcart-price-shipping-text {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid #eee;
}
.rt-cart .ttvcart-product-label-value {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: #666;
  padding: 3px 0;
}
.rt-cart .ttvcart-product-label-value .ttvcart-product-value { color: #333; font-weight: 600; }
.rt-cart .ttvcart-product-label-value.total {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid #eee;
}
.rt-cart .ttvcart-product-label-value.total .ttvshoping-cart-label,
.rt-cart .ttvcart-product-label-value.total .ttvcart-product-value {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

/* Botones View Cart / CheckOut */
.rt-cart .ttvcart-product-list-btn-wrapper {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.rt-cart .ttvcart-product-list-viewcart,
.rt-cart .ttvcart-product-list-checkout {
  flex: 1;
  border: none;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
}
.rt-cart .ttvcart-product-list-viewcart a,
.rt-cart .ttvcart-product-list-checkout a {
  display: block;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
}
.rt-cart .ttvcart-product-list-viewcart {
  background: #fff;
  border: 1px solid #ddd;
}
.rt-cart .ttvcart-product-list-viewcart a { color: #333; }
.rt-cart .ttvcart-product-list-viewcart:hover { border-color: #999; }
.rt-cart .ttvcart-product-list-checkout {
  background: #FF0100;
}
.rt-cart .ttvcart-product-list-checkout a { color: #fff; }
.rt-cart .ttvcart-product-list-checkout:hover { background: #cc0100; }

/* ── NAV: forzar fondo rojo (el tema lo pisaba con gris) ─────── */
.rt-nav,
.rt-nav .tvcms-header-menu,
.rt-nav .tvcmsmain-menu-wrapper,
.rt-nav #tvdesktop-megamenu,
.rt-nav #tvdesktop-megamenu > div,
.rt-nav #tvdesktop-megamenu ul {
  background: #FF0100 !important;
}
.rt-nav #tvdesktop-megamenu a,
.rt-nav #tvdesktop-megamenu li > a,
.rt-nav #tvdesktop-megamenu span {
  color: #fff !important;
}
.rt-nav #tvdesktop-megamenu li > a:hover {
  background: rgba(0,0,0,0.18) !important;
}
/* Los desplegables del megamenú sí en blanco con texto oscuro */
.rt-nav #tvdesktop-megamenu .dropdown-menu,
.rt-nav #tvdesktop-megamenu .tvmegamenu-dropdown,
.rt-nav #tvdesktop-megamenu ul ul {
  background: #fff !important;
}
.rt-nav #tvdesktop-megamenu .dropdown-menu a,
.rt-nav #tvdesktop-megamenu .tvmegamenu-dropdown a,
.rt-nav #tvdesktop-megamenu ul ul a {
  color: #333 !important;
}
.rt-nav #tvdesktop-megamenu ul ul a:hover { color: #FF0100 !important; background: transparent !important; }

/* ── TELÉFONO DUPLICADO bajo el nav (bloque displayNav1): fuera ── */
.rt-header .tvcmsdesktop-contact { display: none !important; }
/* ================================================================
   REPUESTOTENERIFE — CSS SECCIONES HOME (fase 3)
   Marquesina · Grid categorías · Banners ofertas · Banda contacto
   PEGAR AL FINAL de custom.css (después de todo lo anterior).
   ================================================================ */

/* ── MARQUESINA DE MARCAS ────────────────────────────────────── */
.rt-marquee-bar {
  background: #FF0100;
  overflow: hidden;
  padding: 8px 0;
}
.rt-marquee-track {
  display: flex;
  animation: rt-scroll 30s linear infinite;
  width: max-content;
}
.rt-marquee-track span {
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 600;
  padding: 0 20px;
  white-space: nowrap;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.rt-marquee-track .sep { color: rgba(255,255,255,0.3); padding: 0 4px; }
@keyframes rt-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── GRID DE CATEGORÍAS ──────────────────────────────────────── */
.rt-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.rt-cat-item {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 18px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  transition: all .2s;
  cursor: pointer;
  text-align: center;
}
.rt-cat-item:hover {
  border-color: #FF0100;
  box-shadow: 0 4px 16px rgba(255,1,0,0.1);
  transform: translateY(-2px);
}
.rt-cat-item .icon {
  width: 52px; height: 52px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.rt-cat-item:hover .icon { background: rgba(255,1,0,0.08); }
.rt-cat-item .name {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 1.25;
}
.rt-cat-item .count {
  font-size: 10px;
  color: #999;
  line-height: 1.3;
}
.rt-cat-item-all { border: 1.5px dashed #FF0100; }
.rt-cat-item-all .icon { background: rgba(255,1,0,0.07); }
.rt-cat-item-all .name { color: #FF0100; }

/* ── BANNERS DE OFERTAS ──────────────────────────────────────── */
.rt-banners-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.rt-banner {
  border-radius: 6px;
  overflow: hidden;
  display: block;
  position: relative;
  min-height: 200px;
  text-decoration: none !important;
}
.rt-banner-wide { background: linear-gradient(120deg, #1a1a1a 0%, #3a3a3a 100%); }
.rt-banner-narrow { background: #222; }
.rt-banner-content {
  position: relative;
  z-index: 1;
  padding: 32px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rt-banner-narrow .rt-banner-content { padding: 28px 24px; }
.rt-banner-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.rt-banner-title {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 18px;
}
.rt-banner-big {
  font-family: 'Roboto', sans-serif;
  font-size: 46px;
  font-weight: 700;
  color: #FF0100;
  line-height: 1;
}
.rt-banner-sub {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.rt-banner-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 18px;
}
.rt-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FF0100;
  color: #fff;
  border-radius: 4px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
  transition: background .2s;
}
.rt-banner:hover .rt-banner-btn { background: #cc0100; }

/* ── BANDA DE CONTACTO (divisor dos mundos) ──────────────────── */
.rt-contact-band {
  background: #222;
  padding: 40px 0;
}
.rt-contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.rt-contact-text .label {
  font-size: 11px;
  color: #FF0100;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.rt-contact-text h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.rt-contact-text p { font-size: 14px; color: #999; line-height: 1.6; margin: 0; }
.rt-contact-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.rt-btn-tel {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #555;
  color: #fff !important;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all .2s;
  width: 280px;
  justify-content: center;
}
.rt-btn-tel:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
.rt-btn-wa {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff !important;
  border-radius: 4px;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .2s;
  width: 280px;
  justify-content: center;
}
.rt-btn-wa:hover { background: #1aab53; }

/* ── RESPONSIVE de las nuevas secciones ──────────────────────── */
@media (max-width: 992px) {
  .rt-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .rt-banners-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .rt-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .rt-contact-inner { grid-template-columns: 1fr; gap: 24px; }
  .rt-contact-btns { align-items: stretch; }
  .rt-btn-tel, .rt-btn-wa { width: 100%; }
}
@media (max-width: 480px) {
  .rt-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── BANDA DE SERVICIO TÉCNICO 24/7 (debajo de rt-worlds) ─────── */
.rt-service-band {
  background: #FF0100;
  padding: 40px 0;
}
.rt-service-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.rt-service-text { display: flex; align-items: center; gap: 20px; }
.rt-service-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.rt-service-copy .label {
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: .85;
}
.rt-service-copy h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.25;
}
.rt-service-copy p { font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.5; margin: 0; }
.rt-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #FF0100 !important;
  border-radius: 4px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s, transform .15s;
}
.rt-service-cta:hover { background: #1a1a1a; color: #fff !important; }
@media (max-width: 768px) {
  .rt-service-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .rt-service-text { flex-direction: column; text-align: center; }
  .rt-service-cta { width: 100%; justify-content: center; }
}

/* ── DOS MUNDOS (Repuestos / Electrodomésticos) ──────────────── */
.rt-worlds {
  background: #f4f4f4;
  padding: 48px 0;
}
.rt-worlds-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.rt-worlds-label {
  text-align: center;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.rt-worlds-title {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #222;
  margin-bottom: 32px;
}
.rt-worlds-title span { color: #FF0100; }
.rt-worlds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rt-world-card {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #fff;
}
a.rt-world-card:hover {
  border-color: #FF0100;
  box-shadow: 0 6px 24px rgba(255,1,0,0.12);
}
.rt-world-banner {
  height: 160px;
  position: relative;
  overflow: hidden;
}
.rt-world-repair .rt-world-banner { background: linear-gradient(120deg, #1a1a1a 0%, #333 100%); }
/* Mundo electrodomésticos: grafito claro (paleta corporativa, sin azules) */
.rt-world-appliance .rt-world-banner { background: linear-gradient(120deg, #3a3a3a 0%, #5c5c5c 100%); }
.rt-world-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.rt-world-banner-content {
  position: relative;
  z-index: 1;
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rt-world-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FF0100;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 10px;
  width: fit-content;
}
.rt-world-appliance .rt-world-tag { background: #1a1a1a; }
.rt-world-title {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.rt-world-body {
  background: #fff;
  padding: 20px 24px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rt-world-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}
.rt-world-cta {
  flex-shrink: 0;
  background: #FF0100;
  color: #fff;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s;
  display: flex; align-items: center; gap: 6px;
}
a.rt-world-card:hover .rt-world-cta { background: #cc0100; }
/* Tarjeta sin enlace (electrodomésticos, próximamente): CTA neutro */
.rt-world-appliance .rt-world-cta {
  background: #e8e8e8;
  color: #888;
  cursor: default;
}

@media (max-width: 850px) {
  .rt-worlds-grid { grid-template-columns: 1fr; }
  .rt-world-body { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   FOOTER + WHATSAPP FLOTANTE (fase 4)
   ================================================================ */
.rt-footer { background: #1a1a1a; padding: 48px 0 0; }
.rt-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}
.rt-footer-logo { display: inline-block; margin-bottom: 14px; }
.rt-footer-logo img { max-height: 48px; width: auto; background: transparent !important; padding: 6px 10px; border-radius: 4px; }
.rt-footer-brand p { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 14px; }
.rt-footer-phone {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #FF0100 !important;
  text-decoration: none !important;
  display: block;
  margin-bottom: 10px;
}
.rt-footer-phone:hover { color: #ff3333 !important; }
.rt-footer-h {
  font-size: 13px; font-weight: 700; color: #ddd;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px;
}
.rt-footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.rt-footer-links a { font-size: 13px; color: #888 !important; transition: color .15s; text-decoration: none !important; }
.rt-footer-links a:hover { color: #fff !important; }
.rt-footer-bottom {
  border-top: 1px solid #2a2a2a;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #555;
}
.rt-footer-legal { display: flex; gap: 16px; }
.rt-footer-bottom a { color: #555 !important; text-decoration: none !important; }
.rt-footer-bottom a:hover { color: #fff !important; }
.rt-footer-credit { white-space: nowrap; }

/* Botón flotante WhatsApp */
.rt-wa-float {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
}
.rt-wa-float a {
  width: 54px; height: 54px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  transition: transform .2s;
  text-decoration: none !important;
}
.rt-wa-float a:hover { transform: scale(1.08); }

@media (max-width: 992px) {
  .rt-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .rt-footer-inner { grid-template-columns: 1fr; }
  .rt-footer-bottom { flex-direction: column; align-items: flex-start; }
  .rt-wa-float { bottom: 16px; right: 16px; }
}

/* ================================================================
   OFERTAS ELECTRODOMÉSTICOS + PEDIDO POR TELÉFONO (fase 5)
   ================================================================ */
.rt-section-bordered { border-bottom: 1px solid #e8e8e8; }

.rt-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rt-promo-card {
  border-radius: 6px;
  overflow: hidden;
  display: block;
  position: relative;
  height: 200px;
  background: #1a1a1a;
  text-decoration: none !important;
}
.rt-promo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.rt-promo-content {
  position: relative;
  z-index: 1;
  padding: 32px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rt-promo-title {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 18px;
}

.rt-phone-order {
  background: #f8f8f8;
  border-bottom: 1px solid #ebebeb;
  padding: 48px 0;
}
.rt-phone-order-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.rt-po-title {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
  line-height: 1.2;
}
.rt-po-desc { font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 28px; }
.rt-po-btns { display: flex; flex-direction: column; gap: 10px; }
.rt-po-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 5px;
  padding: 13px 20px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  transition: opacity .2s;
}
.rt-po-btn:hover { opacity: 0.9; }
.rt-po-btn-wa { background: #25D366; color: #fff !important; }
.rt-po-btn-tel { background: #222; color: #fff !important; }
.rt-po-btn-mail { background: #fff; color: #333 !important; border: 1.5px solid #ddd; }

.rt-po-right { display: flex; flex-direction: column; gap: 14px; }
.rt-po-feature {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rt-po-feature-icon {
  width: 40px; height: 40px;
  background: #fff3f3;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rt-po-feature-title { font-weight: 700; font-size: 14px; color: #222; margin-bottom: 3px; }
.rt-po-feature-desc { font-size: 13px; color: #888; line-height: 1.5; }

@media (max-width: 850px) {
  .rt-promo-grid { grid-template-columns: 1fr; }
  .rt-phone-order-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ================================================================
   BLOG (módulo tvcmsblog Post Display) — restyle sobre su markup
   ================================================================ */
/* Contenedor general alineado con el resto de secciones */
.tvcmsblog-event-home { padding: 40px 0 !important; background: #fff !important; }
.tvcmsblog-event-home .tvblog-event {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100%;
}
.tvcmsblog-event-home .tvnews-event-wrapper {
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Cabecera del bloque → estilo rt-sec-header */
.tvcmsblog-event-home .tvcmsmain-title-wrapper {
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #FF0100 !important;
  text-align: left !important;
}
.tvcmsblog-event-home .tvmain-sub-title h4 {
  font-size: 11px !important;
  color: #FF0100 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 4px !important;
  text-align: left !important;
}
.tvcmsblog-event-home .tvmain-title h2 {
  font-family: 'Roboto', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin: 0 !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Tarjetas de artículo → estilo blog-card de la maqueta */
.tvcmsblog-event-home article.blog_pos {
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: all .2s !important;
  margin: 0 !important;
}
.tvcmsblog-event-home article.blog_pos:hover {
  border-color: #FF0100 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px);
}
.tvcmsblog-event-home .tvblog-content-img img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  display: block !important;
}
.tvcmsblog-event-home .tvnews-event-content-wrapper { padding: 14px 16px 16px !important; }

/* Fecha → etiqueta pequeña roja en línea */
.tvcmsblog-event-home .tvdate-time {
  display: inline-flex !important;
  gap: 4px !important;
  font-size: 10px !important;
  color: #FF0100 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}
.tvcmsblog-event-home .tvdate-time p {
  margin: 0 !important;
  font-size: 10px !important;
  color: #FF0100 !important;
  font-weight: 700 !important;
}

/* Título del post */
.tvcmsblog-event-home .tvnews-event-titel h3 { margin: 0 0 6px !important; }
.tvcmsblog-event-home a.post_title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #333 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  display: block;
}
.tvcmsblog-event-home article.blog_pos:hover a.post_title { color: #FF0100 !important; }

/* Extracto */
.tvcmsblog-event-home .tvnews-event-description {
  font-size: 12px !important;
  color: #888 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Flechas prev/next del carrusel: fuera (con 3 posts no hacen falta) */
.tvcmsblog-event-home .tvcmsblog-event-home-pagination-wrapper { display: none !important; }

/* Enlace "All blogs" → estilo rt-see-all */
.tvcmsblog-event-home .tvnews-event-link { text-align: right !important; margin-top: 14px !important; }
.tvcmsblog-event-home .tvnews-event-link a {
  font-size: 13px !important;
  color: #FF0100 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.tvcmsblog-event-home .tvnews-event-link a:hover { color: #cc0100 !important; text-decoration: underline !important; }

/* ================================================================
   RETOQUES FINALES: hero con imagen de fondo + marquesina con logos
   ================================================================ */

/* HERO con imagen de fondo.
   SUBIR LA IMAGEN A: /themes/child_v1_electron_1/assets/img/hero-bg.jpg
   (nombre exacto). El degradado oscuro por encima garantiza la
   legibilidad del texto blanco. Si la imagen no existe aún, se ve
   el degradado solo — no rompe nada. */
.rt-hero {
  background:
    linear-gradient(120deg, rgba(18,18,18,0.88) 0%, rgba(35,35,35,0.82) 60%, rgba(35,35,35,0.65) 100%),
    url('../img/hero-bg.jpg') center / cover no-repeat,
    linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Marquesina con logos: píldoras blancas sobre la franja roja */
.rt-marquee-bar { padding: 10px 0; }
.rt-mq-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 4px;
  padding: 5px 14px;
  margin: 0 8px;
  height: 34px;
}
.rt-mq-logo img {
  max-height: 22px;
  max-width: 90px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ── MARQUESINA v2: fondo blanco, logos grandes, sin hueco ────── */
.rt-marquee-bar {
  background: #fff;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  padding: 12px 0;
}
.rt-marquee-track { animation-duration: 45s; }
.rt-mq-logo {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0 30px;
  height: 40px;
}
.rt-mq-logo img {
  max-height: 38px;
  max-width: 150px;
}

/* ================================================================
   PULIDO FINAL: tipografías +2px, blancos sobre oscuro,
   header móvil, home full-width
   ================================================================ */

/* ── Base tipográfica general ── */
body { font-size: 15px; }

/* ── Tipografías +2px en textos y títulos pequeños ── */
.rt-top-bar { font-size: 14px; }
.rt-trust-item { font-size: 14px; }
.rt-hero-eyebrow { font-size: 13px; }
.rt-hero-desc { font-size: 17px; }
.rt-hero-tag { font-size: 13px; }
.rt-hero-stat .lbl { font-size: 13px; }
.rt-sec-label { font-size: 13px; }
.rt-sec-title { font-size: 24px; }
.rt-see-all { font-size: 15px; }
.rt-prod-brand { font-size: 12px; }
.rt-prod-name { font-size: 15px; }
.rt-prod-ref { font-size: 12px; }
.rt-cat-item .name { font-size: 14px; }
.rt-cat-item .count { font-size: 12px; }
.rt-world-tag { font-size: 12px; }
.rt-world-desc { font-size: 15px; }
.rt-world-cta { font-size: 15px; }
.rt-banner-eyebrow { font-size: 13px; }
.rt-banner-desc { font-size: 14px; }
.rt-banner-btn { font-size: 15px; }
.rt-contact-text p { font-size: 16px; }
.rt-po-desc { font-size: 16px; }
.rt-po-btn { font-size: 16px; }
.rt-po-feature-title { font-size: 16px; }
.rt-po-feature-desc { font-size: 15px; }
.rt-footer-brand p { font-size: 15px; }
.rt-footer-h { font-size: 15px; }
.rt-footer-links a { font-size: 15px; }
.rt-footer-bottom { font-size: 14px; }
.rt-delivery-info { font-size: 14px; }
.tvcmsblog-event-home a.post_title { font-size: 17px !important; }
.tvcmsblog-event-home .tvnews-event-description { font-size: 14px !important; }
.tvcmsblog-event-home .tvdate-time,
.tvcmsblog-event-home .tvdate-time p { font-size: 12px !important; }
.tvproduct-wrapper .tvproduct-quick-btn .tvproduct-quick-lable {
    display: none !important;}
/* ── Textos sobre fondo oscuro: blanco, no gris ── */
.rt-top-left, .rt-top-right { color: #fff; }
.rt-top-left a, .rt-top-right a { color: #fff; }
.rt-top-sep { color: rgba(255,255,255,0.35); }
.rt-hero-desc { color: #fff; }
.rt-hero-tag { color: #fff; border-color: rgba(255,255,255,0.35); }
.rt-hero-stat .lbl { color: #fff; }
.rt-banner-eyebrow { color: rgba(255,255,255,0.85); }
.rt-banner-desc { color: #fff; }
.rt-contact-text p { color: #fff; }
.rt-footer-brand p { color: #fff; }
.rt-footer-links a { color: #fff !important; opacity: 0.85; }
.rt-footer-links a:hover { opacity: 1; }
.rt-footer-bottom { color: #fff; opacity: 0.9; }
.rt-footer-bottom a { color: #fff !important; }

/* ── HEADER MÓVIL: ocultar el header de escritorio en <992px ──
   (la clase hidden-md-down de Bootstrap no existe en el CSS de
   Electron, así que nuestro header salía también en móvil
   solapándose con el móvil del tema — este bloque lo corrige) ── */
@media (max-width: 991px) {
  .rt-header { display: none !important; }
}

/* ── HOME full-width: anular el padding/ancho del .container ── */
#index #wrapper { padding-top: 0; }
#index #wrapper > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
#index #content.page-home { margin: 0; }

/* ================================================================
   FIXES: imagen blog a sangre, móvil (header TV + marquesina)
   ================================================================ */

/* Imagen del blog ocupando todo su contenedor */
.tvcmsblog-event-home .tvblog-content-img {
  height: 210px !important;
  overflow: hidden;
}
.tvcmsblog-event-home .tvblog-content-img img,
.tvcmsblog-event-home .tvblog-content-img picture,
.tvcmsblog-event-home .tvblog-content-img picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 991px) {
  /* Header de escritorio: fuera en móvil (doble seguro con el withData del tpl) */
  .rt-header { display: none !important; }

  /* ── Rescate del header móvil de Electron ── */
  /* Carrito: icono contenido + badge + desplegable oculto por defecto */
  #tvcms-mobile-view-header .tv-cart-icon svg { width: 24px !important; height: 24px !important; }
  #tvcms-mobile-view-header .tvcart-icon-text-wrapper { position: relative; display: inline-flex !important; }
  #tvcms-mobile-view-header span.cart-products-count {
    position: absolute; top: -6px; right: -9px;
    background: #FF0100 !important; color: #fff !important;
    border-radius: 50%; font-size: 10px !important;
    min-width: 16px; height: 16px; line-height: 16px !important;
    text-align: center; display: inline-block !important; padding: 0 2px !important;
  }
  #tvcms-mobile-view-header .ttvcmscart-show-dropdown-right { display: none; }
  #tvcms-mobile-view-header .blockcart.active .ttvcmscart-show-dropdown-right {
    display: block; position: absolute; right: 8px; top: 56px;
    background: #fff; z-index: 3000; min-width: 280px;
    border: 1px solid #e5e5e5; border-radius: 6px; padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  }

  /* Buscador móvil: barra limpia a ancho completo bajo el header */
  #tvcms-mobile-view-header .tvheader-sarch-display { display: none !important; }
  #tvcms-mobile-view-header .tvsearch-header-display-wrappper {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding: 8px 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #tvcms-mobile-view-header .tvsearch-header-display-wrappper form {
    display: flex !important;
    border: 2px solid #FF0100;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    margin: 0;
  }
  #tvcms-mobile-view-header .tvheader-top-search { flex: 1; display: flex; }
  #tvcms-mobile-view-header .tvheader-top-search-wrapper-info-box { width: 100%; display: flex; }
  #tvcms-mobile-view-header input.tvcmssearch-words {
    width: 100% !important;
    border: none !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    height: auto !important;
  }
  #tvcms-mobile-view-header button.tvheader-search-btn {
    background: #FF0100 !important;
    border: none !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
  }
  #tvcms-mobile-view-header button.tvheader-search-btn svg { width: 16px; height: 16px; }
  #tvcms-mobile-view-header button.tvheader-search-btn svg circle { fill: transparent !important; stroke: #fff !important; }
  #tvcms-mobile-view-header button.tvheader-search-btn svg polygon { fill: #fff !important; }

  /* Logo móvil contenido */
  #tvcms-mobile-view-header img.logo,
  #tvcms-mobile-view-header .logo img { max-height: 38px !important; width: auto !important; object-fit: contain !important; }

  /* ── Marquesina en móvil: logos más juntos y compactos ── */
  .rt-mq-logo { margin: 0 12px; height: 32px; }
  .rt-mq-logo img { max-height: 28px; max-width: 105px; }
}

/* ================================================================
   TARJETA con botón AÑADIR funcional + fix menú móvil
   ================================================================ */

/* La tarjeta ya no es un <a>; recomponemos el layout */
.rt-prod-card { display: flex; flex-direction: column; }
.rt-prod-link { text-decoration: none !important; display: flex; flex-direction: column; flex: 1; }
.rt-prod-link .rt-prod-info { flex: 1; }
.rt-prod-card:hover { border-color: #FF0100; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }

/* El footer sale del <a> y va al fondo de la tarjeta */
#rt-featured .rt-prod-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 14px;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}
.rt-add-form { margin: 0; }
/* Botón añadir (form) y botón ver (enlace) comparten aspecto */
#rt-featured .rt-add-btn {
  width: 34px; height: 34px;
  background: #FF0100;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .1s;
  text-decoration: none !important;
}
#rt-featured .rt-add-btn:hover { background: #cc0100; }
#rt-featured .rt-add-btn:active { transform: scale(0.92); }
#rt-featured .rt-add-btn-view { background: #333; }
#rt-featured .rt-add-btn-view:hover { background: #000; }

/* ── FIX MENÚ MÓVIL: el panel lateral se veía roto ──
   El slidebar del megamenú TV necesita posicionamiento y fondo
   correctos; sin esto se solapa con el contenido (como en la captura). */
@media (max-width: 991px) {
  #tvcms-mobile-view-header .tvmobile-slidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 82% !important;
    max-width: 320px;
    background: #fff !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    box-shadow: 2px 0 18px rgba(0,0,0,0.25);
    transform: translateX(-100%);
    transition: transform .28s ease;
    padding: 0 0 30px;
  }
  /* Cuando el tema marca el menú como abierto */
  #tvcms-mobile-view-header .tvmobile-slidebar.active,
  #tvcms-mobile-view-header .tvmobile-slidebar.open,
  body.tvmobile-menu-open #tvcms-mobile-view-header .tvmobile-slidebar {
    transform: translateX(0);
  }
  #tvcms-mobile-view-header .tvmobile-dropdown-close {
    text-align: right; padding: 14px 16px; border-bottom: 1px solid #eee;
  }
  #tvcms-mobile-view-header .menu-content { list-style: none; margin: 0; padding: 0; }
  #tvcms-mobile-view-header .menu-content > li {
    border-bottom: 1px solid #f0f0f0;
  }
  #tvcms-mobile-view-header .menu-content > li > a {
    display: block; padding: 14px 18px;
    font-size: 15px; font-weight: 600; color: #222 !important;
    text-decoration: none;
  }
  #tvcms-mobile-view-header .tvmega-menu-title {
    padding: 14px 18px; font-weight: 700; color: #FF0100 !important;
    text-transform: uppercase; font-size: 13px; letter-spacing: 1px;
  }
  #tvcms-mobile-view-header .tv-sub-menu {
    position: static !important; width: 100% !important;
    box-shadow: none !important; padding: 0 0 0 12px !important;
    background: #fafafa !important;
  }
  #tvcms-mobile-view-header .tv-sub-menu a {
    padding: 10px 18px !important; font-size: 14px !important;
    color: #555 !important; font-weight: 500 !important;
  }
  #tvcms-mobile-view-header .tv-menu-col { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}
/* ================================================================
   PÁGINA DE CATEGORÍA — CSS real (clases nativas de Electron/PS,
   NO las inventadas del wireframe). Reskin visual únicamente:
   cero cambios de estructura, cero riesgo funcional.
   ================================================================ */

/* ── BREADCRUMB (_partials/breadcrumb.tpl) ─────────────────────── */
nav.breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  font-size: 13px;
  background: transparent;
  border-bottom: 1px solid #eee;
}
nav.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
nav.breadcrumb li { display: flex; align-items: center; color: #777; font-weight: 500; }
nav.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin: 0 8px;
  color: #ccc;
}
nav.breadcrumb li:last-child a span { color: #1a1a1a; font-weight: 700; }
nav.breadcrumb a { color: #777; }
nav.breadcrumb a:hover { color: #FF0100; }

/* ── LAYOUT: columnas (layout-both-columns.tpl) ─────────────────── */
#left-column { padding-right: 8px; }
#content-wrapper.left-column.right-column { padding-left: 8px; }

/* ── SIDEBAR "NUESTRA TIENDA" (ps_categorytree override) ────────── */
.block-categories {
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 24px;
  background: #fff;
}
.category-top-menu.tvside-panel-dropdown { list-style: none; margin: 0; padding: 0; }
.tv-category-title-wrapper {
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}
.tv-main-category-title {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tvleft-right-title-toggle { display: none; } /* solo relevante en mobile */
.tv-leftcategory-wrapper { padding: 6px 0; }
.category-sub-menu { list-style: none; margin: 0; padding: 0; }
.category-sub-menu > li { position: relative; }
.category-sub-menu > li > a {
  display: block;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #333;
  border-left: 3px solid transparent;
}
.category-sub-menu > li > a:hover { color: #FF0100; }
.category-sub-link {
  display: block;
  padding: 6px 16px 6px 30px;
  font-size: 12.5px;
  color: #777;
}
.category-sub-link:hover { color: #FF0100; }
.category-sub-menu .navbar-toggler.collapse-icons {
  position: absolute;
  top: 6px; right: 10px;
  cursor: pointer;
  color: #999;
}
.category-sub-menu .navbar-toggler.collapse-icons i.add { display: inline-block; }
.category-sub-menu .navbar-toggler.collapse-icons i.remove { display: none; }
.category-sub-menu .navbar-toggler.collapse-icons[aria-expanded="true"] i.add,
.category-sub-menu .navbar-toggler.collapse-icons.expanded i.add { display: none; }
.category-sub-menu .navbar-toggler.collapse-icons[aria-expanded="true"] i.remove,
.category-sub-menu .navbar-toggler.collapse-icons.expanded i.remove { display: inline-block; }

/* ── BANNER DE SUBCATEGORÍAS (category.tpl → product_list_header) ── */
.tv-category-main-div { margin-bottom: 24px; }
.tv-sub-category-title-wrapper { margin-bottom: 12px; }
.tv-sub-category-title {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}
.tvcategory-name-image {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .tvcategory-name-image { grid-template-columns: repeat(2, 1fr); }
}
.tv-sub-category-wrapper {
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.tv-sub-category-wrapper:hover { border-color: #FF0100; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.tv-category-image img { width: 100%; aspect-ratio: 1.4; object-fit: cover; display: block; }
.tvcategory-name { padding: 8px 6px; }
.tvcategory-name .category-name { font-size: 12px; font-weight: 600; color: #333; }

/* ── BARRA DE HERRAMIENTAS (products-top.tpl) ───────────────────── */
/* Los 3 bloques de la barra traen clases Bootstrap (col-md-4, float:left,
   ancho fijo) que hacen que el tercero baje de línea. Se neutralizan para
   que quede todo en una sola fila. Verificado en vivo: 112px -> 64px. */
#js-product-list-top.products-selection > div {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
#js-product-list-top.products-selection {
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f8f8;
  border-radius: 6px;
  margin-bottom: 20px;
}
.tv_search_filter_wrapper { margin-right: 14px; }
.tvleft-right-title-wrapper {
  display: flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
}
.tvleft-right-title-wrapper:hover { border-color: #FF0100; color: #FF0100; }
.tvleft-right-title-wrapper i.material-icons { font-size: 16px; }
.tv-total-product-number { font-size: 13px; color: #888; margin: 0; }

.tvcmsproduct-grid-list { display: flex; gap: 4px; }
.tvproduct-view {
  width: 34px !important; height: 34px !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.tvproduct-view svg { width: 14px !important; height: 14px !important; }
.tvproduct-view svg path { fill: #888 !important; }
.tvproduct-view span { display: none; }
/* El tema fuerza fondo oscuro en todos; se revierte a blanco salvo el activo */
.tvproduct-view { background: #fff !important; border: 1px solid #ddd !important; }
.tvproduct-view.active { background: #1a1a1a !important; border-color: #1a1a1a !important; }
.tvproduct-view.active svg path { fill: #fff !important; }
.tvproduct-view.active,
.tvproduct-view:hover { background: #1a1a1a; border-color: #1a1a1a; }
.tvproduct-view.active svg path,
.tvproduct-view:hover svg path { fill: #fff !important; }

.tvall-page-shortby { margin-left: auto; }
.sort-by-row { display: flex; align-items: center; gap: 8px; }
.sort-by { font-size: 13px; color: #666; white-space: nowrap; }
.products-sort-order.dropdown { position: relative; }
.products-sort-order .select-title {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  color: #333;
  background: #fff;
  cursor: pointer;
}
.products-sort-order .select-title i.material-icons { font-size: 16px; }
.products-sort-order .dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: 6px 0;
  z-index: 20;
  display: none;
}
.products-sort-order.dropdown.show .dropdown-menu,
.products-sort-order .dropdown-menu.show { display: block; }
.products-sort-order .select-list {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: #333;
}
.products-sort-order .select-list:hover { background: #f8f8f8; color: #FF0100; }
.products-sort-order .select-list.current { color: #FF0100; font-weight: 700; }

/* ── GRID DE PRODUCTOS (products.tpl) — pensado para full width,
   sin columna izquierda: 4 por fila en escritorio ─────────────── */
#js-product-list .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) {
  #js-product-list .products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  #js-product-list .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #js-product-list .products { grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* Las tarjetas traen clases de Bootstrap (col-xl-3, float, ancho en %)
   de cuando el listado no era un CSS grid. Se neutralizan para que
   cada tarjeta ocupe el 100% de su celda del grid, no un % anidado. */
#js-product-list .products > .product-miniature {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── PAGINACIÓN (_partials/pagination.tpl) ──────────────────────── */
nav.pagination.tvcms-all-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  margin-top: 12px;
  border-top: 1px solid #eee;
}
.tv-pagination-content { font-size: 12.5px; color: #888; }
.tv-pagination-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}
.tv-pagination-wrapper li { display: flex; }
.tv-pagination-wrapper li a {
  min-width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.tv-pagination-wrapper li a:hover { border-color: #FF0100; color: #FF0100; }
.tv-pagination-wrapper li.current a {
  background: #FF0100;
  border-color: #FF0100;
  color: #fff;
}
.tv-pagination-wrapper .spacer {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  border: none;
  color: #999;
}

/* ================================================================
   TARJETA DE PRODUCTO NATIVA (catalog/_partials/miniatures/
   product-grid-view.tpl) — reproduce el wireframe aprobado sobre
   la estructura real del tema, solo con CSS (flexbox order).
   Estructura real:  .tvproduct-wrapper
                       .tvproduct-image  (imagen + flags + botones)
                       .tvproduct-info-box-wrapper (nombre + precio)
   Objetivo (wireframe):  imagen / nombre / [precio + 3 botones]
   ================================================================ */
.tvproduct-description-tab .tab-pane {
    padding: 20px;
}
.tvproduct-wrapper {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  transition: all .2s;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tvproduct-wrapper:hover {
  border-color: #FF0100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* ── IMAGEN ──────────────────────────────────────────────────── */
.tvproduct-image {
  background: #f8f8f8;
  height: 170px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.tvproduct-image .thumbnail { display: block; height: 100%; }
.tvproduct-image img.tvproduct-defult-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12px;
  mix-blend-mode: multiply;
}
.tvproduct-image img.tvproduct-hover-img { display: none; }

/* Flags (Nuevo / Oferta) — ancladas a la tarjeta, ya que la imagen
   pasó a position:static para que los botones bajen al pie */
.tvproduct-flags { position: absolute; top: 8px; list-style: none; margin: 0; padding: 0; z-index: 2; }
.tvproduct-online-new-wrapper { left: 8px; }
.tvproduct-sale-pack-wrapper { right: 8px; }
.tvproduct-flags .product-flag {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 7px;
  border-radius: 2px;
  margin-bottom: 4px;
  color: #fff !important;
  background: #FF0100;
}
.tvproduct-flags .product-flag.new { background: #1a1a1a; }

/* ── BARRA DE BOTONES: se saca de la imagen y se lleva al pie ──
   Está dentro de .tvproduct-image en el HTML, pero se ancla a la
   tarjeta (que pasa a ser el contenedor de posicionamiento) para
   que quede en la fila del precio, alineada a la derecha.
   Verificado en vivo: 0 solapamientos, 34px de holgura mínima. */
.tvproduct-wrapper { position: relative; }
.tvproduct-image { position: static; }
.tvproduct-image .tvproduct-hover-btn {
  position: absolute;
  top: auto;
  bottom: 16px;
  left: auto;
  right: 14px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  z-index: 4;
}
/* Solo 3 acciones, como en el wireframe: lupa, corazón, carrito */
.tvproduct-hover-btn .tvcompare-wrapper { display: none !important; }

.tvproduct-quick-btn .quick-view,
.tvproduct-cart-btn button.tvproduct-add-to-cart,
.tvproduct-wishlist > * {
  width: 34px !important; height: 34px !important;
  border-radius: 4px !important;
  display: flex !important; align-items: center; justify-content: center;
  border: none;
  cursor: pointer;
  transition: background .2s;
  padding: 0 !important;
  margin: 0 !important;
}
/* Lupa (vista rápida) — gris oscuro */
.tvproduct-quick-btn .quick-view { background: #333 !important; }
.tvproduct-wrapper:hover .tvproduct-quick-btn .quick-view { background: #000 !important; }
.tvproduct-quick-icon { display: flex; align-items: center; justify-content: center; }
.tvproduct-quick-icon i.material-icons { font-size: 17px; color: #fff !important; }

/* Corazón (favoritos) — blanco con borde */
.tvproduct-wishlist > * {
  background: #fff !important;
  border: 1px solid #ddd !important;
  color: #999 !important;
}
.tvproduct-wishlist > *:hover {
  background: #fff5f5 !important;
  border-color: #FF0100 !important;
  color: #FF0100 !important;
}
.tvproduct-wishlist i { font-size: 16px; }

/* Carrito — rojo de marca */
.tvproduct-cart-btn button.tvproduct-add-to-cart { background: #FF0100 !important; }
.tvproduct-wrapper:hover .tvproduct-cart-btn button.tvproduct-add-to-cart { background: #cc0100 !important; }
.tvproduct-cart-btn button.tvproduct-add-to-cart i.material-icons.add-cart { color: #fff !important; font-size: 17px; }
.tvproduct-cart-btn button.tvproduct-add-to-cart i.material-icons.out-of-stock { display: none; }
.tvproduct-cart-btn button.tvproduct-add-to-cart.tvproduct-out-of-stock {
  background: #ccc !important;
  cursor: not-allowed;
}

/* ── INFO: nombre y precio ───────────────────────────────────── */
.tvproduct-info-box-wrapper {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tvproduct-info-box-wrapper .product-description {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Estrellas de valoración: fuera, no están en el diseño aprobado */
.tvproduct-info-box-wrapper .product-description > div:first-child:not(.tvproduct-name):not(.tv-product-price) {
  display: none;
}
.tvproduct-name.product-title {
  order: 1;
  flex: 1;
  margin-bottom: 10px;
}
.tvproduct-name.product-title h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}
.tvproduct-name.product-title a:hover h6 { color: #FF0100; }

/* Precio: al pie, con separador, dejando hueco a la derecha
   para los tres botones que flotan sobre él */
.tv-product-price.tvproduct-name-price-wrapper {
  order: 2;
  padding: 10px 0 0;
  border-top: 1px solid #f0f0f0;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.tv-product-price .product-price-and-shipping {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tv-product-price .price {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #222 !important;
}
.tv-product-price .regular-price {
  font-size: 12px;
  color: #bbb;
  text-decoration: line-through;
}

/* ================================================================
   FICHA DE PRODUCTO — CSS real (clases nativas de Electron/PS,
   sacadas del HTML real de la página). Reskin visual únicamente,
   cero cambios de estructura ni de .tpl.
   ================================================================ */

/* ── LAYOUT: imagen + info ───────────────────────────────────────── */
.tvproduct-page-wrapper { max-width: 1200px; margin: 0 auto; padding: 24px 20px 0; }
.tvprduct-image-info-wrapper { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.tv-product-page-image, .tv-product-page-content { flex: 1 1 460px; max-width: 100%; }
.tv-product-page-image { padding-right: 30px !important; }
.tv-product-page-content { padding-left: 20px !important; }

/* Galería */
/* Fondo blanco: las fotos de producto son sobre blanco y el gris se notaba */
.images-container { background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.product-images img { width: 100%; height: auto; object-fit: contain; padding: 24px; mix-blend-mode: multiply; }
.tvvertical-slider .arrows i.material-icons {
  background: #fff; border: 1px solid #ddd; border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: #333; cursor: pointer;
}

/* ── TÍTULO Y MARCA ──────────────────────────────────────────────── */
.tvproduct-title-brandimage { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.tvproduct-title-brandimage h1.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}
.tvcms-product-brand-logo img { max-height: 34px; width: auto; }

/* ── ESTRELLAS ───────────────────────────────────────────────────── */
.tvall-product-star-icon { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.tvall-product-star-icon .star_content { display: flex; gap: 2px; }
.tvall-product-star-icon .star { color: #ddd; }
.tvall-product-star-icon .star.star_on { color: #FFB800; }
.tvall-product-star-icon .star i.material-icons { font-size: 16px; }
/* Nota: NO poner ::before de respaldo en las estrellas. La fuente Material
   Icons sí carga y el glifo ya viene en el texto del <i>, así que un ::before
   duplicaba cada estrella (se veían doble en la vista lista). */
.tvall-product-review { font-size: 12.5px; color: #888; text-decoration: underline; cursor: pointer; }

/* ── PRECIO ──────────────────────────────────────────────────────── */
.product-prices {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}
.product-price.h5 { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.current-price .price {
  font-family: 'Roboto', sans-serif;
  font-size: 28px; font-weight: 700; color: #FF0100;
}
.tvproduct-tax-label { font-size: 12px; color: #999; }
.tax-shipping-delivery-label .delivery-information {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: #2e7d32;
}

/* ── DESCRIPCIÓN CORTA ───────────────────────────────────────────── */
.tvproduct-page-decs { font-size: 13.5px; color: #555; line-height: 1.6; margin-bottom: 22px; }
.tvproduct-page-decs p { margin: 0 0 8px; }

/* ── CANTIDAD + COMPRAR ──────────────────────────────────────────── */
.product-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.product-quantity { display: flex; align-items: center; gap: 8px; }
.product-quantity .control-label { font-size: 12.5px; color: #777; font-weight: 600; }
.qty .bootstrap-touchspin {
  display: flex; align-items: center;
  border: 1px solid #ddd; border-radius: 4px; overflow: hidden;
}
.qty input.input-group {
  width: 46px; height: 42px;
  border: none; text-align: center;
  font-size: 14px; font-weight: 700; color: #333;
}
.qty .input-group-btn-vertical { display: flex; flex-direction: row-reverse; }
.qty .btn-touchspin {
  width: 34px; height: 42px;
  border: none; background: #f8f8f8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid #ddd;
}
.qty .btn-touchspin:hover { background: #eee; }
/* NO poner ::before de respaldo: el glifo de Material Icons ya viene en el
   texto del <i>, así que duplicaba los símbolos + y - (se veían dobles). */
.qty i.material-icons.touchspin-up::before,
.qty i.material-icons.touchspin-down::before { content: none !important; }

.tvwishlist-compare-wrapper-page { display: flex; align-items: center; gap: 10px; flex: 1; }
.tvcart-btn-model button.tvall-inner-btn.add-to-cart {
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 28px;
  background: #FF0100; color: #fff;
  border: none; border-radius: 4px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer;
}
.tvcart-btn-model button.tvall-inner-btn.add-to-cart:hover { background: #cc0100; }
.tvcart-btn-model i.material-icons.shopping-cart { font-size: 18px; }

/* ── INDICADOR DE STOCK ──────────────────────────────────────────── */
.tvproduct-stock-social { margin-bottom: 18px; }
.tv-indicator.tv-bar { display: flex; align-items: center; gap: 10px; }
.tv-outer {
  width: 90px; height: 8px;
  background: #eee; border-radius: 4px; overflow: hidden;
}
.tv-inner { height: 100%; background: #2e7d32; border-radius: 4px; }
.tv-inner.tv-lvl-5 { width: 100%; }
.tv-inner.tv-lvl-4 { width: 80%; }
.tv-inner.tv-lvl-3 { width: 60%; background: #f0a500; }
.tv-inner.tv-lvl-2 { width: 40%; background: #f0a500; }
.tv-inner.tv-lvl-1 { width: 20%; background: #FF0100; }
.tv-items .tvlowqty { font-size: 12.5px; color: #2e7d32; font-weight: 600; }

/* ── COMPARTIR EN REDES ──────────────────────────────────────────── */
.product-additional-info .social-icon ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.product-additional-info .social-icon li a {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd; border-radius: 50%;
  color: #888; font-size: 0;
  position: relative;
}
.product-additional-info .social-icon li a:hover { border-color: #FF0100; color: #FF0100; }
.product-additional-info .social-icon li.facebook a::before { content: 'f'; font-size: 13px; font-weight: 700; }
.product-additional-info .social-icon li.twitter a::before { content: '\1D54F'; font-size: 12px; }
.product-additional-info .social-icon li.pinterest a::before { content: 'P'; font-size: 12px; font-weight: 700; }

/* ── SELLOS DE CONFIANZA ─────────────────────────────────────────── */
#block-reassurance { margin-top: 8px; }
#block-reassurance ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#block-reassurance .block-reassurance-item { display: flex; align-items: center; gap: 10px; }
#block-reassurance .block-reassurance-item img { width: 24px; height: 24px; flex-shrink: 0; }
#block-reassurance .block-reassurance-item span { font-size: 12.5px; color: #555 !important; }
#block-reassurance .block-title { font-weight: 700; color: #1a1a1a !important; }

/* ── PESTAÑAS ────────────────────────────────────────────────────── */
.tvproduct-description-tab { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }
.tvproduct-description-tab .nav-tabs {
  display: flex; gap: 4px; list-style: none;
  margin: 0 0 24px; padding: 0;
  border-bottom: 2px solid #eee;
}
.tvproduct-description-tab .nav-link {
  display: block;
  padding: 12px 20px;
  font-size: 13.5px; font-weight: 700; color: #888;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}
.tvproduct-description-tab .nav-link.active,
.tvproduct-description-tab .nav-link.js-product-nav-active {
  color: #FF0100;
  border-bottom-color: #FF0100;
}
/* Pestañas: el tema deja la clase 'fade in' también en paneles inactivos
   (verificado en vivo: Descripción y Reseñas salían las dos a la vez),
   así que el único criterio fiable es .active */
.tvproduct-description-tab .tab-pane { display: none !important; }
.tvproduct-description-tab .tab-pane.active { display: block !important; }

.product-description.cms-description {
  font-size: 12px; color: #777; line-height: 1.8;
  background: #f8f8f8; border-radius: 6px; padding: 16px 18px;
  word-break: break-word;
}

/* Detalles del producto */
.product-manufacturer { margin-bottom: 16px; }
.product-manufacturer img { max-height: 40px; }
.product-reference, .product-quantities {
  display: flex; gap: 8px;
  padding: 10px 0;
  font-size: 13.5px;
}
.product-reference .label, .product-quantities .label { color: #888; min-width: 140px; }
.product-reference span[itemprop="sku"], .product-quantities span { color: #333; font-weight: 600; }
.product-features .h6 { font-family: 'Roboto', sans-serif; font-size: 14px; margin: 20px 0 10px; color: #1a1a1a; }

/* ── RESEÑAS ─────────────────────────────────────────────────────── */
#tvcmsproduct_comments_block_tab .comment {
  border: 1px solid #eee; border-radius: 8px; padding: 18px; margin-bottom: 14px;
}
.comment_author_infos { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.comment_author_infos strong { font-size: 13.5px; color: #1a1a1a; }
.comment_author_infos em { font-size: 11.5px; color: #999; font-style: normal; }
#tvcmsproduct_comments_block_tab .star_content { display: flex; gap: 2px; margin-bottom: 8px; }
#tvcmsproduct_comments_block_tab .star_content .star img { width: 13px; height: 13px; }
.comment_details .title_block { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.comment_details p { font-size: 13px; color: #555; margin: 0; }

/* ── ARREGLOS VERIFICADOS EN VIVO (categoría) ─────────────────── */

/* Ancho máximo en TODAS las páginas excepto la home (#index queda
   a ancho completo, con su propio bloque más abajo) */
body:not(#index) #wrapper > .container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Corazón duplicado sobre la foto: es de otro módulo de wishlist
   (.wishlist-button-add), distinto del corazón del tema que ya está
   en la barra de botones. Se oculta para no tener dos. */
.wishlist-button-add { display: none !important; }

/* Cuadritos grises heredados dentro de los botones de acción
   (.tvproduct-quick-icon venía con rgb(223,225,230)) */
.tvproduct-hover-btn .tvproduct-quick-icon,
.tvproduct-hover-btn .panel-product-actions,
.tvproduct-hover-btn .panel-product-line,
.tvproduct-hover-btn i,
.tvproduct-hover-btn span { background: transparent !important; }

/* Corazón de favoritos: blanco con borde, hover discreto (sin rojo pleno) */
.tvproduct-hover-btn .tvproduct-wishlist,
.tvproduct-hover-btn .tvproduct-wishlist > a {
  background: #fff !important;
  border: 1px solid #ddd !important;
  color: #999 !important;
  border-radius: 4px !important;
  width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center; justify-content: center;
}
.tvproduct-hover-btn .tvproduct-wishlist:hover,
.tvproduct-hover-btn .tvproduct-wishlist > a:hover {
  background: #fff !important;
  border-color: #FF0100 !important;
  color: #FF0100 !important;
}

/* ── AJUSTES VERIFICADOS EN VIVO (ronda 2) ───────────────────── */

/* Botón "Filtrar": blanco con borde, como en el wireframe.
   El tema lo servía en negro rgb(34,34,34) con texto blanco. */
.tvleft-right-title-wrapper {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
}
.tvleft-right-title-wrapper:hover {
  background: #fff !important;
  border-color: #FF0100 !important;
  color: #FF0100 !important;
}
.tvleft-right-title-wrapper * { color: inherit !important; background: transparent !important; }

/* Solo dos vistas: cuadrícula y lista. Las otras tres del tema, fuera. */
.tvproduct-view.tvproduct-grid-2,
.tvproduct-view.tvproduct-list-2,
.tvproduct-view.tvproduct-catelog { display: none !important; }

/* ── VISTA LISTA ──────────────────────────────────────────────
   Cada producto trae 4 variantes de tarjeta en el HTML (grid,
   grid-2, list, catelog) y el tema muestra una. Como no cambia
   ninguna clase del DOM al alternar, se detecta con :has() sobre
   el botón de vista activo. Sin JavaScript. */
#wrapper:has(.tvproduct-view.tvproduct-list.active) #js-product-list .products > .product-miniature {
  grid-column: 1 / -1 !important;
}
.tvproduct-wrapper.list {
  flex-direction: row !important;
  align-items: stretch;
  padding: 14px;
  gap: 18px;
}
.tvproduct-wrapper.list .tvproduct-image {
  width: 200px !important;
  flex: 0 0 200px !important;
  height: 200px !important;
  padding: 0 !important;
  position: relative !important;
}
.tvproduct-wrapper.list .thumbnail.product-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.tvproduct-wrapper.list .tvproduct-defult-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 10px;
  mix-blend-mode: multiply;
}
.tvproduct-wrapper.list .tvproductdescription-button-wrapper {
  flex: 1 !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 !important;
}
.tvproduct-wrapper.list .tvproduct-name h6 { font-size: 15px !important; margin-bottom: 8px; }
.tvproduct-wrapper.list .price { font-size: 22px !important; }
.tvproduct-wrapper.list .tvproduct-hover-btn {
  position: static !important;
  margin-top: 14px;
  justify-content: flex-start !important;
}

/* Wishlist: estado activo en rojo. (Ojo: añadir a favoritos requiere
   sesión iniciada — es requisito de PrestaShop, no del CSS.) */
.tvproduct-hover-btn .tvproduct-wishlist.active,
.tvproduct-hover-btn .tvproduct-wishlist > a.active,
.tvproduct-hover-btn .tvproduct-wishlist > a.checked {
  background: #fff5f5 !important;
  border-color: #FF0100 !important;
  color: #FF0100 !important;
}
.tvproduct-hover-btn .tvproduct-wishlist.active i,
.tvproduct-hover-btn .tvproduct-wishlist > a.active i,
.tvproduct-hover-btn .tvproduct-wishlist > a.checked i { color: #FF0100 !important; }

/* ── AJUSTES VERIFICADOS EN VIVO (ronda 3) ───────────────────── */

/* Botones de vista: hover legible. Antes el icono se volvía blanco
   sobre fondo blanco en el botón inactivo. Selector con .tvcmsproduct-grid-list
   para ganar especificidad a la regla base que lleva !important. */
.tvcmsproduct-grid-list .tvproduct-view:not(.active):hover {
  background: #f2f2f2 !important;
  border-color: #999 !important;
}
.tvcmsproduct-grid-list .tvproduct-view:not(.active):hover svg path { fill: #333 !important; }
.tvproduct-view.active:hover { background: #1a1a1a !important; border-color: #1a1a1a !important; }
.tvproduct-view.active:hover svg path { fill: #fff !important; }

/* Corazón: el icono interior debe verse rojo al pasar por encima
   (antes se quedaba negro/blanco y no se leía) */
.tvproduct-hover-btn .tvproduct-wishlist:hover i,
.tvproduct-hover-btn .tvproduct-wishlist > a:hover i,
.tvall-product-btn-list .tvproduct-wishlist:hover i,
.tvall-product-btn-list .tvproduct-wishlist > a:hover i { color: #FF0100 !important; }

/* ── VISTA LISTA: barra de botones ────────────────────────────
   En lista el tema usa otro contenedor (.tvall-product-btn-list) y
   añade etiquetas de texto ("Quick View", "Add To Cart") que se
   desbordaban sobre los iconos. Se ocultan y se alinean los 3 botones. */
.tvproduct-wrapper.list .tvall-product-btn-list {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  width: auto !important;
  height: auto !important;
}
.tvproduct-wrapper.list .tvproduct-quick-lable,
.tvproduct-wrapper.list .tvproduct-cart-lable,
.tvproduct-wrapper.list [class*="-lable"],
.tvproduct-wrapper.list [class*="-label"] { display: none !important; }
.tvproduct-wrapper.list .tvall-product-btn-list > * { flex: 0 0 auto; }
.tvproduct-wrapper.list .quick-view,
.tvproduct-wrapper.list .tvproduct-add-to-cart,
.tvproduct-wrapper.list .tvproduct-wishlist > a {
  width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center; justify-content: center;
  padding: 0 !important; border-radius: 4px !important;
}
.tvproduct-wrapper.list .tvcompare-wrapper { display: none !important; }

/* ── AJUSTES VERIFICADOS EN VIVO (ronda 4 · vista lista) ─────── */

/* El cuadrito gris rgb(223,225,230) vive en .tvproduct-quick-icon.
   La regla anterior solo cubría .tvproduct-hover-btn (cuadrícula);
   en lista el contenedor es .tvall-product-btn-list. */
.tvproduct-wrapper.list .tvproduct-quick-icon,
.tvall-product-btn-list .tvproduct-quick-icon,
.tvall-product-btn-list .panel-product-actions,
.tvall-product-btn-list .panel-product-line,
.tvall-product-btn-list i,
.tvall-product-btn-list span { background: transparent !important; }

/* Corazón en vista lista: mismo aspecto que en cuadrícula
   (venía sin fondo ni borde) */
.tvproduct-wrapper.list .tvproduct-wishlist,
.tvproduct-wrapper.list .tvproduct-wishlist > a,
.tvall-product-btn-list .tvproduct-wishlist,
.tvall-product-btn-list .tvproduct-wishlist > a {
  background: #fff !important;
  border: 1px solid #ddd !important;
  color: #999 !important;
  border-radius: 4px !important;
}
.tvproduct-wrapper.list .tvproduct-wishlist > a:hover,
.tvall-product-btn-list .tvproduct-wishlist > a:hover {
  border-color: #FF0100 !important;
  color: #FF0100 !important;
}

/* Estrellas: estaban pegadas al texto de la descripción */
.tvproduct-wrapper.list .tvall-product-star-icon { margin-top: 10px; margin-bottom: 12px !important; }
.tvproduct-wrapper.list .tv-product-desc { margin-bottom: 6px; }

/* ── FICHA DE PRODUCTO · ARREGLOS VERIFICADOS EN VIVO ────────── */

/* Stock oculto (decisión del cliente: no quiere mostrar existencias) */
.tvproduct-stock-social .tv-product-page,
.tv-indicator { display: none !important; }

/* Fila de compra: botón + wishlist/comparar + redes, alineados.
   El contenedor medía 279px con hijos que suman 445px, por eso se
   envolvía y quedaba desalineado. Verificado: los 3 al mismo top. */
.product-add-to-cart { display: block !important; }
.tvwishlist-compare-wrapper-page {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  width: 100% !important;
  flex-wrap: nowrap !important;
}
.tvwishlist-compare-wrapper-page > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}
.tvcart-btn-model { float: none !important; }
.tvproduct-wishlist-compare {
  display: flex !important;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 !important;
}
.tvproduct-wishlist-compare > * { margin: 0 !important; }
.tvproduct-stock-social {
  display: flex !important;
  align-items: center;
  height: 46px;
  padding: 0 !important;
}
.tvproduct-stock-social .product-additional-info { margin: 0 !important; }

/* Flechas de la galería: el tema las marca .slick-hidden cuando hay
   una sola imagen, pero seguían ocupando sitio */
.tvvertical-slider .arrows .slick-hidden { display: none !important; }

/* ── PRODUCTOS RELACIONADOS ───────────────────────────────────
   El carrusel es Owl Carousel (no Slick). Las tarjetas tenían
   alturas distintas (294 vs 277) e iban pegadas sin separación. */
.tv-main-div .owl-stage { display: flex !important; align-items: stretch !important; }
.tv-main-div .owl-item {
  height: auto !important;
  display: flex !important;
  padding: 0 8px !important;
}
.tv-main-div .owl-item > .product-miniature { display: flex !important; width: 100%; }
.tv-main-div .owl-item .thumbnail-container {
  height: auto !important;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  width: 100%;
}
.tv-main-div .owl-item .tvproduct-wrapper { height: auto !important; flex: 1; }

/* Flechas del carrusel: estaban a 0x0 y descolocadas */
.tv-main-div .owl-nav {
  display: flex !important;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.tv-main-div .owl-nav .owl-prev,
.tv-main-div .owl-nav .owl-next {
  width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px;
  color: #888 !important;
  cursor: pointer;
}
.tv-main-div .owl-nav .owl-prev:hover,
.tv-main-div .owl-nav .owl-next:hover {
  border-color: #FF0100 !important;
  color: #FF0100 !important;
}
.tv-main-div .owl-nav .disabled { opacity: .35; }

/* ── FICHA DE PRODUCTO · RONDA 2 ──────────────────────────────── */

/* Sellos de confianza: sin la línea vertical izquierda que traía el tema */
#block-reassurance,
#block-reassurance ul,
#block-reassurance li,
#block-reassurance .block-reassurance-item {
  border: none !important;
  border-left: none !important;
}
#block-reassurance li { padding-left: 0 !important; margin-bottom: 10px; }
#block-reassurance ul { gap: 4px; }

/* Selector de cantidad: los dos botones a los lados del número,
   como en el wireframe (el tema los apila en vertical) */
.qty .bootstrap-touchspin {
  display: flex !important;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  width: max-content;
}
.qty .input-group-btn-vertical {
  display: flex !important;
  flex-direction: row !important;
  order: 3;
}
.qty input.input-group {
  order: 2;
  width: 46px !important;
  height: 42px !important;
  border: none !important;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
.qty .btn-touchspin {
  width: 38px !important;
  height: 42px !important;
  border: none !important;
  background: #f8f8f8 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.qty .btn-touchspin:hover { background: #eee !important; }
/* El botón de restar va a la izquierda del número */
.qty .bootstrap-touchspin-down { order: 1; }
.qty .bootstrap-touchspin-up { order: 3; }

/* Iconos de redes sociales: círculos con borde, como en el wireframe */
.product-additional-info .social-icon ul {
  display: flex !important;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-additional-info .social-icon li a {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  color: #888 !important;
  background: #fff !important;
}
.product-additional-info .social-icon li a:hover {
  border-color: #FF0100 !important;
  color: #FF0100 !important;
}

/* ── PRODUCTOS RELACIONADOS ───────────────────────────────────── */

/* Título: separado de las tarjetas */
.tvcmslike-product .tvcmsmain-title-wrapper { margin-bottom: 24px !important; }

/* CORRECCIÓN: .tvcmslike-prev/.tvcmslike-next SON las flechas buenas
   (30x30, a la derecha). NO ocultarlas.
   Lo que flotaba sobre el último producto era el botón de comparar y el
   wishlist duplicado del otro módulo, igual que pasaba en categoría. */
.tvcmslike-product .tvproduct-compare,
.tvcmslike-product .tvcmsproduct-compare,
.tvcmslike-product .wishlist-button-add { display: none !important; }
/* El nav de Owl sí sobra: está a 0x0 y descolocado */
.tvcmslike-product .owl-nav { display: none !important; }

/* La paginación real de abajo sí se muestra, bien formada */
.tvlike-pagination-wrapper.tv-pagination-wrapper {
  display: flex !important;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
/* Editado por Keyla: estas flechas se ocultan */
.tvlike-pagination-wrapper .tvcmsprev-btn,
.tvlike-pagination-wrapper .tvcmsnext-btn {
  display: none !important;
}
.tvlike-pagination-wrapper .tvcmsprev-btn:hover,
.tvlike-pagination-wrapper .tvcmsnext-btn:hover {
  border-color: #FF0100 !important;
  color: #FF0100 !important;
}

/* Pestañas: sin bordes en tablas ni filas de datos */
.tvproduct-description-tab table,
.tvproduct-description-tab table th,
.tvproduct-description-tab table td,
.tvproduct-description-tab .data-sheet,
.tvproduct-description-tab .data-sheet dt,
.tvproduct-description-tab .data-sheet dd,
.tvproduct-description-tab .product-reference,
.tvproduct-description-tab .product-quantities,
.tvproduct-description-tab .product-features,
.tvproduct-description-tab .product-out-of-stock {
  border: none !important;
}

/* ── AÑADIDOS MANUALES DE KEYLA — MANTENER ────────────────────── */
#product #block-reassurance ul {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.product-quantity .input-group-btn-vertical .btn {
    box-shadow: none;
}

/* ── FOOTER PRODUCTO ─────────────────────────────────────────────────────── */
/* Añadido manualmente por Keyla — barra pegajosa inferior de la ficha de
   producto: limita el tamaño de la miniatura para que no se desborde.
   MANTENER en futuras versiones del archivo. */
.tvfooter-product-sticky-bottom .product-image img {
    max-width: 80px;
    height: auto;
}


/* ================================================================
   PÁGINA SERVICIO TÉCNICO — rediseño alineado con la home.
   Reutiliza el lenguaje: hero degradado, cabeceras con línea roja,
   marquesina, bandas alternas #f4f4f4. Prefijo .stp-
   ================================================================ */
.stp-services-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .stp-services-grid-new { grid-template-columns: repeat(2, 1fr); }
}
.stp-service-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 20px 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: 0.2s;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
}
.stp-service-card:hover {
  border-color: #FF0100;
  box-shadow: 0 4px 16px rgba(255,1,0,0.1);
  transform: translateY(-2px);
}
.stp-service-card .icon {
  width: 56px;
  height: 56px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.stp-service-card .icon .material-icons {
  font-size: 26px;
  color: #FF0100;
}
.stp-service-card:hover .icon {
  background: rgba(255,1,0,0.08);
}
.stp-service-card .name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.stp-hero { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); position: relative; overflow: hidden; }
.stp-hero-inner { max-width: 1200px; margin: 0 auto; padding: 56px 20px; display: flex; align-items: center; gap: 40px; }
@media (max-width: 860px) { .stp-hero-inner { flex-direction: column; align-items: stretch; } }
.stp-hero-content { flex: 1; z-index: 2; position: relative; }
.stp-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: #FF0100; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin-bottom: 16px; }
.stp-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: stpPulse 1.6s infinite; }
@keyframes stpPulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.stp-hero-title { font-family: 'Roboto', sans-serif; font-size: 38px; font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 14px; }
.stp-hero-title span { color: #FF0100; }
.stp-hero-desc { font-size: 15px; color: #bbb; margin-bottom: 28px; max-width: 500px; line-height: 1.6; }
.stp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.stp-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #FF0100; color: #fff; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 4px; transition: background .2s; }
.stp-btn-primary:hover { background: #cc0100; }
.stp-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15); transition: all .2s; }
.stp-btn-ghost:hover { background: rgba(255,1,0,0.15); border-color: rgba(255,1,0,0.3); }
.stp-hero-visual { flex-shrink: 0; width: 340px; position: relative; }
@media (max-width: 860px) { .stp-hero-visual { width: 100%; } }
.stp-hero-visual-bg { position: absolute; inset: -20px; background: radial-gradient(circle at center, rgba(255,1,0,0.12) 0%, transparent 70%); }
.stp-hero-card { position: relative; z-index: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 28px; }
.stp-hero-card .stp-card-title { color: #fff; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.stp-hero-card .stp-card-sub { color: #888; font-size: 12px; margin-bottom: 20px; }
.stp-hero-phones { display: flex; flex-direction: column; gap: 10px; }
.stp-phone-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.stp-phone-row .zone { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.stp-phone-row a { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 700; color: #fff; }
.stp-phone-row a:hover { color: #FF0100; }

.stp-marquee { background: #FF0100; overflow: hidden; padding: 9px 0; }
.stp-marquee-track { display: flex; animation: stpScroll 32s linear infinite; width: max-content; }
.stp-marquee-track span { color: rgba(255,255,255,0.95); font-size: 12px; font-weight: 600; padding: 0 20px; white-space: nowrap; letter-spacing: 1px; text-transform: uppercase; }
.stp-marquee-track .sep { color: rgba(255,255,255,0.4); padding: 0 4px; }
@keyframes stpScroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }

.stp-section { max-width: 1200px; margin: 0 auto; padding: 52px 20px; }
.stp-band { background: #f4f4f4; margin-bottom: 80px; }
.stp-band-inner { max-width: 1200px; margin: 0 auto; padding: 52px 20px; }
.stp-sec-header { margin-bottom: 32px; text-align: center; }
.stp-sec-label { font-size: 11px; color: #FF0100; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.stp-sec-title { font-family: 'Roboto', sans-serif; font-size: 26px; font-weight: 700; color: #222; }
.stp-sec-title span { color: #FF0100; }
.stp-sec-sub { font-size: 14px; color: #888; margin-top: 8px; max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.6; }

.stp-guarantees { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
@media (max-width: 760px) { .stp-guarantees { grid-template-columns: repeat(2, 1fr); }
.tvproduct-description-tab .nav-link {
  display: block;
  padding: 12px 0px; }
.tvproduct-description-tab {
    padding: 0 0px 60px;
}
.tvproduct-page-wrapper {
    padding: 24px 10px 0;
}
.tvproduct-title-brandimage h1.h1 {
    font-size: 20px;
}
.tv-product-page-content h1 {
    padding-right: 100px;
}
}
.stp-guarantee { text-align: center; padding: 28px 18px; border-right: 1px solid #f0f0f0; }
.stp-guarantee:last-child { border-right: none; }
.stp-guarantee-icon { color: #FF0100; margin-bottom: 12px; display: flex; justify-content: center; }
.stp-guarantee h4 { font-family: 'Roboto', sans-serif; font-size: 16px; color: #1a1a1a; margin: 0 0 4px; }
.stp-guarantee p { font-size: 13px; color: #888; margin: 0; line-height: 1.4; }
.stp-intro-body { max-width: 760px; margin: 0 auto; text-align: center; font-size: 15px; color: #555; line-height: 1.8; }
.stp-intro-body strong { color: #1a1a1a; }
.stp-note { max-width: 760px; margin: 28px auto 0; background: #fff; border: 1px solid #eee; border-left: 3px solid #FF0100; padding: 16px 20px; border-radius: 4px; font-size: 13.5px; color: #666; line-height: 1.6; }
#block-reassurance .block-reassurance-item { display: inline-block; align-items: left; gap: 10px; padding: 15px 0px !important; }
.stp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
@media (max-width: 860px) { .stp-why-grid { grid-template-columns: 1fr; } }
.stp-why-item { padding-left: 52px; position: relative; }
.stp-why-item .ico { position: absolute; left: 0; top: 2px; width: 38px; height: 38px; border-radius: 8px; background: #fff5f5; color: #FF0100; display: flex; align-items: center; justify-content: center; }
.stp-why-item h4 { font-family: 'Roboto', sans-serif; font-size: 15px; margin: 4px 0 6px; color: #1a1a1a; }
.stp-why-item p { font-size: 13.5px; color: #666; line-height: 1.6; margin: 0; }

.stp-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px) { .stp-services-grid { grid-template-columns: repeat(2, 1fr); } }
.stp-service { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4/5; display: block; background: #eee; }
.stp-service img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.stp-service:hover img { transform: scale(1.07); }
.stp-service::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.1) 55%, transparent 100%); }
.stp-service-label { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.stp-service-label span { color: #fff; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700; }
.stp-service-label .arrow { width: 28px; height: 28px; border-radius: 50%; background: #FF0100; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transform: translateX(-6px); transition: all .25s; }
.stp-service:hover .arrow { opacity: 1; transform: translateX(0); }

.stp-form-band { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); }
.stp-form-inner { max-width: 1200px; margin: 0 auto; padding: 52px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .stp-form-inner { grid-template-columns: 1fr; gap: 28px; } }
.stp-form-text h3 { font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.stp-form-text p { font-size: 14px; color: #aaa; line-height: 1.7; margin: 0 0 20px; }
.stp-form-benefits { display: flex; flex-direction: column; gap: 10px; }
.stp-form-benefits div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #ddd; }
.stp-form-benefits svg { color: #FF0100; flex-shrink: 0; }
.stp-form-card { background: #fff; border-radius: 10px; padding: 30px; }
.stp-form-card label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 5px; }
.stp-form-card input, .stp-form-card textarea { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 6px; padding: 11px 14px; font-family: 'Open Sans', sans-serif; font-size: 14px; margin-bottom: 14px; }
.stp-form-card input:focus, .stp-form-card textarea:focus { outline: none; border-color: #FF0100; }
.stp-form-card button { width: 100%; background: #FF0100; color: #fff; border: none; border-radius: 6px; padding: 14px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; transition: background .2s; }
.stp-form-card button:hover { background: #cc0100; }

.stp-final { text-align: center; }
.stp-final h2 { font-family: 'Roboto', sans-serif; font-size: 28px; color: #1a1a1a; margin: 0 0 10px; }
.stp-final h2 span { color: #FF0100; }
.stp-final p { font-size: 15px; color: #666; max-width: 620px; margin: 0 auto 26px; line-height: 1.6; }
.stp-final-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.stp-final-btn { display: inline-flex; align-items: center; gap: 10px; background: #1a1a1a; color: #fff; font-weight: 700; font-size: 16px; padding: 15px 30px; border-radius: 6px; transition: all .2s; }
.stp-final-btn:hover { background: #FF0100; }
.stp-final-btn.wa { background: #25D366; }
.stp-final-btn.wa:hover { background: #1da851; }
/* ============================================================
   ICONOS CSS PARA PÁGINA CMS DE SERVICIO TÉCNICO
   Pegar al FINAL de custom.css.
   Sustituye SVG inline filtrados por PrestaShop.
   ============================================================ */
.stp-css-icon {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  vertical-align: -0.125em;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* El tema Electron estaba sobrescribiendo algunos fondos */
body .stp-hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}
body .stp-form-band {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

/* Asegura que los iconos hereden el color previsto */
.stp-btn-primary .stp-css-icon,
.stp-final-btn .stp-css-icon { color: currentColor; }
.stp-guarantee-icon .stp-css-icon,
.stp-why-item .ico .stp-css-icon { color: #FF0100; }
.stp-form-benefits .stp-css-icon { color: #FF0100; }
.stp-service-label .arrow .stp-css-icon { color: currentColor; }

.stp-css-icon-1 {
  width: 17px;
  height: 17px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%2001-2.18%202%2019.79%2019.79%200%2001-8.63-3.07A19.5%2019.5%200%20013.09%209%2019.79%2019.79%200%2001.22.4%202%202%200%20012%20.18h3a2%202%200%20012%201.72c.13.96.36%201.9.7%202.81a2%202%200%2001-.45%202.11L6.09%207.91a16%2016%200%20006%206l1.27-1.27a2%202%200%20012.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200122%2016.92z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%2001-2.18%202%2019.79%2019.79%200%2001-8.63-3.07A19.5%2019.5%200%20013.09%209%2019.79%2019.79%200%2001.22.4%202%202%200%20012%20.18h3a2%202%200%20012%201.72c.13.96.36%201.9.7%202.81a2%202%200%2001-.45%202.11L6.09%207.91a16%2016%200%20006%206l1.27-1.27a2%202%200%20012.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200122%2016.92z%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-2 {
  width: 30px;
  height: 30px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2012c0%204.97-4.03%209-9%209s-9-4.03-9-9%204.03-9%209-9c1.5%200%202.9.37%204.15%201.02%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2012c0%204.97-4.03%209-9%209s-9-4.03-9-9%204.03-9%209-9c1.5%200%202.9.37%204.15%201.02%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-3 {
  width: 30px;
  height: 30px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-4 {
  width: 30px;
  height: 30px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-5 {
  width: 30px;
  height: 30px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2210%22%20x2%3D%2222%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2210%22%20x2%3D%2222%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-6 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpolyline%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpolyline%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-7 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%2215%22%20height%3D%2213%22%2F%3E%3Cpolygon%20points%3D%2216%208%2020%208%2023%2011%2023%2016%2016%2016%2016%208%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2218.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2218.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%2215%22%20height%3D%2213%22%2F%3E%3Cpolygon%20points%3D%2216%208%2020%208%2023%2011%2023%2016%2016%2016%2016%208%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2218.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2218.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-8 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2222%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2210%22%20x2%3D%2223%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2222%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2210%22%20x2%3D%2223%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-9 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-10 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%2001-2%202H7l-4%204V5a2%202%200%20012-2h14a2%202%200%20012%202z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%2001-2%202H7l-4%204V5a2%202%200%20012-2h14a2%202%200%20012%202z%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-11 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cline%20x1%3D%2219%22%20y1%3D%225%22%20x2%3D%225%22%20y2%3D%2219%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cline%20x1%3D%2219%22%20y1%3D%225%22%20x2%3D%225%22%20y2%3D%2219%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-12 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M20%207h-9M14%2017H5M17%203l4%204-4%204M7%2013l-4%204%204%204%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M20%207h-9M14%2017H5M17%203l4%204-4%204M7%2013l-4%204%204%204%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-13 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%20000%201.4l1.6%201.6a1%201%200%20001.4%200l3.77-3.77a6%206%200%2001-7.94%207.94l-6.91%206.91a2.12%202.12%200%2001-3-3l6.91-6.91a6%206%200%20017.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%20000%201.4l1.6%201.6a1%201%200%20001.4%200l3.77-3.77a6%206%200%2001-7.94%207.94l-6.91%206.91a2.12%202.12%200%2001-3-3l6.91-6.91a6%206%200%20017.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-14 {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-15 {
  width: 14px;
  height: 14px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-16 {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-17 {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%2001-2.18%202%2019.79%2019.79%200%2001-8.63-3.07A19.5%2019.5%200%20013.09%209%2019.79%2019.79%200%2001.22.4%202%202%200%20012%20.18h3a2%202%200%20012%201.72c.13.96.36%201.9.7%202.81a2%202%200%2001-.45%202.11L6.09%207.91a16%2016%200%20006%206l1.27-1.27a2%202%200%20012.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200122%2016.92z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%2001-2.18%202%2019.79%2019.79%200%2001-8.63-3.07A19.5%2019.5%200%20013.09%209%2019.79%2019.79%200%2001.22.4%202%202%200%20012%20.18h3a2%202%200%20012%201.72c.13.96.36%201.9.7%202.81a2%202%200%2001-.45%202.11L6.09%207.91a16%2016%200%20006%206l1.27-1.27a2%202%200%20012.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200122%2016.92z%22%2F%3E%3C%2Fsvg%3E");
}

.stp-css-icon-18 {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413z%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
   DEFINITIVO — PÁGINA CMS SERVICIO TÉCNICO TENERIFE
   Este bloque debe permanecer al FINAL del custom.css
   ============================================================ */

/* Limpiar el contenedor CMS de Electron */
body#cms #wrapper,
body#cms #content-wrapper,
body#cms #main,
body#cms .page-content,
body#cms .page-cms {
  overflow: visible !important;
}

body#cms #content.page-content,
body#cms .page-content.page-cms,
body#cms .page-cms {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body#cms .page-content > p:empty,
body#cms .page-cms > p:empty {
  display: none !important;
  margin: 0 !important;
}

/* HERO */
html body#cms .stp-hero,
html body#cms .page-content .stp-hero,
html body#cms .page-cms .stp-hero,
html body#cms section.stp-hero {
  display: block !important;
  width: 100% !important;
  min-height: 390px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

html body#cms .stp-hero-inner {
  width: 100% !important;
  max-width: 1200px !important;
  min-height: 390px !important;
  margin: 0 auto !important;
  padding: 56px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
}

html body#cms .stp-hero-content {
  display: block !important;
  flex: 1 1 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

html body#cms .stp-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 16px !important;
  padding: 4px 10px !important;
  background: #ff0100 !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

html body#cms .stp-eyebrow .dot {
  width: 6px !important;
  height: 6px !important;
  background: #fff !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

html body#cms .stp-hero-title {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  text-transform: none !important;
}

html body#cms .stp-hero-title span {
  color: #ff0100 !important;
}

html body#cms .stp-hero-desc {
  display: block !important;
  max-width: 500px !important;
  margin: 0 0 28px !important;
  color: #bbb !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

html body#cms .stp-hero-cta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

html body#cms a.stp-btn-primary,
html body#cms a.stp-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 13px 24px !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

html body#cms a.stp-btn-primary {
  background: #ff0100 !important;
  color: #fff !important;
  border: 1px solid #ff0100 !important;
}

html body#cms a.stp-btn-primary::before {
  content: "☎";
  display: inline-block;
  margin-right: 8px;
  font-size: 17px;
  line-height: 1;
}

html body#cms a.stp-btn-ghost {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

/* Tarjeta lateral */
html body#cms .stp-hero-visual {
  display: block !important;
  flex: 0 0 340px !important;
  width: 340px !important;
  position: relative !important;
}

html body#cms .stp-hero-card {
  position: relative !important;
  z-index: 2 !important;
  padding: 28px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
}

html body#cms .stp-card-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body#cms .stp-card-sub,
html body#cms .stp-phone-row .zone {
  color: #aaa !important;
}

html body#cms .stp-hero-phones {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 18px !important;
}

html body#cms .stp-phone-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 6px !important;
}

html body#cms .stp-phone-row a {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Marquesina */
html body#cms .stp-marquee {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 9px 0 !important;
  overflow: hidden !important;
  background: #ff0100 !important;
}

html body#cms .stp-marquee-track {
  display: flex !important;
  width: max-content !important;
  animation: stp-scroll 28s linear infinite !important;
}

html body#cms .stp-marquee-track span {
  color: #fff !important;
  white-space: nowrap !important;
}

@keyframes stp-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Secciones generales */
html body#cms .stp-section,
html body#cms .stp-band-inner,
html body#cms .stp-form-inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.stp-band {
    margin-bottom: 50px;
}

html body#cms .stp-band {
  width: 100% !important;
  background: #f4f4f4 !important;
}

/* Iconos de respaldo sin SVG */
html body#cms .stp-guarantee-icon svg,
html body#cms .stp-why-item .ico svg,
html body#cms .stp-form-benefits svg,
html body#cms .stp-service-label .arrow svg,
html body#cms .stp-final-btn svg {
  display: none !important;
}

html body#cms .stp-guarantee-icon::before,
html body#cms .stp-why-item .ico::before,
html body#cms .stp-form-benefits div::before,
html body#cms .stp-service-label .arrow::before,
html body#cms .stp-final-btn::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

html body#cms .stp-guarantee:nth-child(1) .stp-guarantee-icon::before { content: "✓"; font-size: 28px; }
html body#cms .stp-guarantee:nth-child(2) .stp-guarantee-icon::before { content: "◆"; font-size: 22px; }
html body#cms .stp-guarantee:nth-child(3) .stp-guarantee-icon::before { content: "◷"; font-size: 28px; }
html body#cms .stp-guarantee:nth-child(4) .stp-guarantee-icon::before { content: "▣"; font-size: 25px; }

html body#cms .stp-why-item .ico::before {
  content: "✓";
  color: #ff0100 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

html body#cms .stp-form-benefits div::before {
  content: "✓";
  color: #ff0100 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  flex: 0 0 auto !important;
}

html body#cms .stp-service-label .arrow::before {
  content: "›";
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

html body#cms .stp-final-btn::before {
  content: "☎";
  margin-right: 8px !important;
  font-size: 18px !important;
}

html body#cms .stp-final-btn.wa::before {
  content: "✆";
}

/* Servicios */
html body#cms .stp-service {
  position: relative !important;
  overflow: hidden !important;
}

html body#cms .stp-service::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.12) 55%,
    transparent 100%
  ) !important;
}

html body#cms .stp-service-label {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
}

/* Banda llamada */
html body#cms .stp-form-band {
  width: 100% !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

html body#cms .stp-form-card {
  padding: 30px !important;
  background: #fff !important;
  border-radius: 10px !important;
}

html body#cms .stp-form-cta h4 {
  margin: 0 0 8px !important;
  color: #1a1a1a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

html body#cms .stp-form-cta p {
  margin: 0 0 18px !important;
  color: #666 !important;
  font-size: 14px !important;
}

html body#cms .stp-form-call-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 18px !important;
  background: #ff0100 !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Responsive */
@media (max-width: 860px) {
  html body#cms .stp-hero,
  html body#cms section.stp-hero {
    min-height: 0 !important;
  }

  html body#cms .stp-hero-inner {
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 40px 20px !important;
  }

  html body#cms .stp-hero-visual {
    flex: none !important;
    width: 100% !important;
  }

  html body#cms .stp-hero-title {
    font-size: 30px !important;
  }
}

/* ============================================================
   SERVICIO TÉCNICO CMS — CORRECCIÓN FINAL FULL BLEED
   ============================================================ */

/* Evitar desbordamiento horizontal provocado por los bloques 100vw */
html,
body {
  overflow-x: hidden;
}

/* El contenido CMS conserva el ancho central, pero permite que sus hijos
   full bleed salgan del container de Electron */
.page-content.page-cms,
.page-cms,
#content.page-content {
  overflow: visible !important;
}

/* BLOQUES QUE DEBEN OCUPAR TODO EL ANCHO DE LA VENTANA */
.page-content.page-cms .stp-hero,
.page-content.page-cms .stp-marquee,
.page-content.page-cms .stp-band,
.page-content.page-cms .stp-form-band,
.page-cms .stp-hero,
.page-cms .stp-marquee,
.page-cms .stp-band,
.page-cms .stp-form-band {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* HERO */
.page-content.page-cms .stp-hero,
.page-cms .stp-hero,
section.stp-hero {
  display: block !important;
  min-height: 410px !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #1a1a1a !important;
  background-image: linear-gradient(135deg, #171717 0%, #2d2d2d 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Neutralizar cualquier capa blanca que el tema pudiera introducir */
.page-content.page-cms .stp-hero::before,
.page-content.page-cms .stp-hero::after,
.page-cms .stp-hero::before,
.page-cms .stp-hero::after {
  pointer-events: none !important;
}

.page-content.page-cms .stp-hero-inner,
.page-cms .stp-hero-inner {
  width: 100% !important;
  max-width: 1200px !important;
  min-height: 410px !important;
  margin: 0 auto !important;
  padding: 64px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 56px !important;
  box-sizing: border-box !important;
}

.page-content.page-cms .stp-hero-content,
.page-cms .stp-hero-content {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

.page-content.page-cms .stp-hero-title,
.page-cms .stp-hero-title {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.page-content.page-cms .stp-hero-title span,
.page-cms .stp-hero-title span {
  color: #ff0100 !important;
}

.page-content.page-cms .stp-hero-desc,
.page-cms .stp-hero-desc {
  max-width: 570px !important;
  margin: 0 0 30px !important;
  color: #d0d0d0 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

.page-content.page-cms .stp-eyebrow,
.page-cms .stp-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 18px !important;
  padding: 5px 11px !important;
  background: #ff0100 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.page-content.page-cms .stp-hero-cta,
.page-cms .stp-hero-cta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.page-content.page-cms a.stp-btn-primary,
.page-content.page-cms a.stp-btn-ghost,
.page-cms a.stp-btn-primary,
.page-cms a.stp-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 13px 24px !important;
  border-radius: 5px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

.page-content.page-cms a.stp-btn-primary,
.page-cms a.stp-btn-primary {
  background: #ff0100 !important;
  color: #fff !important;
  border: 1px solid #ff0100 !important;
}

.page-content.page-cms a.stp-btn-ghost,
.page-cms a.stp-btn-ghost {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}

/* Tarjeta lateral del hero */
.page-content.page-cms .stp-hero-visual,
.page-cms .stp-hero-visual {
  display: block !important;
  flex: 0 0 360px !important;
  width: 360px !important;
  position: relative !important;
  z-index: 2 !important;
}

.page-content.page-cms .stp-hero-card,
.page-cms .stp-hero-card {
  position: relative !important;
  z-index: 2 !important;
  padding: 30px !important;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.2) !important;
}

.page-content.page-cms .stp-card-title,
.page-cms .stp-card-title {
  margin-bottom: 5px !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.page-content.page-cms .stp-card-sub,
.page-cms .stp-card-sub {
  margin-bottom: 20px !important;
  color: #aaa !important;
  font-size: 13px !important;
}

.page-content.page-cms .stp-hero-phones,
.page-cms .stp-hero-phones {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.page-content.page-cms .stp-phone-row,
.page-cms .stp-phone-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
}

.page-content.page-cms .stp-phone-row .zone,
.page-cms .stp-phone-row .zone {
  color: #aaa !important;
  font-size: 11px !important;
}

.page-content.page-cms .stp-phone-row a,
.page-cms .stp-phone-row a {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* MARQUESINA, una sola franja visual */
.page-content.page-cms .stp-marquee,
.page-cms .stp-marquee {
  display: block !important;
  height: 38px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ff0100 !important;
  border: 0 !important;
}

.page-content.page-cms .stp-marquee-track,
.page-cms .stp-marquee-track {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  animation: stpScroll 32s linear infinite !important;
}

.page-content.page-cms .stp-marquee-track span,
.page-cms .stp-marquee-track span {
  display: inline-block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 20px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
}

.page-content.page-cms .stp-marquee-track .sep,
.page-cms .stp-marquee-track .sep {
  padding: 0 3px !important;
  color: rgba(255,255,255,.5) !important;
}

/* ESPACIADO DE LAS SECCIONES CENTRALES */
.page-content.page-cms .stp-section,
.page-cms .stp-section {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 58px 24px !important;
  box-sizing: border-box !important;
}

.page-content.page-cms .stp-section[style],
.page-cms .stp-section[style] {
  padding-top: 28px !important;
}

.page-content.page-cms .stp-band,
.page-cms .stp-band {
  padding: 0 !important;
  background: #f4f4f4 !important;
}

.page-content.page-cms .stp-band-inner,
.page-cms .stp-band-inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 58px 24px !important;
  box-sizing: border-box !important;
}

.page-content.page-cms .stp-form-band,
.page-cms .stp-form-band {
  padding: 0 !important;
  background: linear-gradient(135deg, #171717 0%, #292929 100%) !important;
}

.page-content.page-cms .stp-form-inner,
.page-cms .stp-form-inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 58px 24px !important;
  box-sizing: border-box !important;
}

/* Textos y cabeceras */
.page-content.page-cms .stp-sec-header,
.page-cms .stp-sec-header {
  margin: 0 0 34px !important;
  text-align: center !important;
}

.page-content.page-cms .stp-sec-label,
.page-cms .stp-sec-label {
  margin-bottom: 7px !important;
  color: #ff0100 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}

.page-content.page-cms .stp-sec-title,
.page-cms .stp-sec-title {
  color: #222 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.page-content.page-cms .stp-sec-title span,
.page-cms .stp-sec-title span {
  color: #ff0100 !important;
}

.page-content.page-cms .stp-sec-sub,
.page-cms .stp-sec-sub {
  color: #777 !important;
}

/* Garantías */
.page-content.page-cms .stp-guarantees,
.page-cms .stp-guarantees {
  margin: 80px 0px;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.04) !important;
}

.page-content.page-cms .stp-guarantee,
.page-cms .stp-guarantee {
  padding: 30px 18px !important;
}

/* Ventajas */
.page-content.page-cms .stp-why-grid,
.page-cms .stp-why-grid {
  gap: 28px 34px !important;
}

.page-content.page-cms .stp-why-item h4,
.page-cms .stp-why-item h4 {
  color: #222 !important;
}

.page-content.page-cms .stp-why-item p,
.page-cms .stp-why-item p {
  color: #666 !important;
}

/* Servicios */
.page-content.page-cms .stp-services-grid,
.page-cms .stp-services-grid {
  gap: 18px !important;
}

.page-content.page-cms .stp-service,
.page-cms .stp-service {
  min-height: 260px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #eee !important;
}

.page-content.page-cms .stp-service img,
.page-cms .stp-service img {
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
}

.page-content.page-cms .stp-service-label,
.page-cms .stp-service-label {
  display: none !important;
}

.page-content.page-cms .stp-service-label > span:first-child,
.page-cms .stp-service-label > span:first-child {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Banda de contacto */
.page-content.page-cms .stp-form-text h3,
.page-cms .stp-form-text h3 {
  color: #fff !important;
  font-size: 30px !important;
}

.page-content.page-cms .stp-form-text > p,
.page-cms .stp-form-text > p {
  color: #c7c7c7 !important;
}

.page-content.page-cms .stp-form-benefits div,
.page-cms .stp-form-benefits div {
  color: #fff !important;
}

.page-content.page-cms .stp-form-card,
.page-cms .stp-form-card {
  padding: 32px !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
}

/* CTA final */
.page-content.page-cms .stp-final h2,
.page-cms .stp-final h2 {
  color: #1a1a1a !important;
}

.page-content.page-cms .stp-final p,
.page-cms .stp-final p {
  color: #666 !important;
}

/* Responsive */
@media (max-width: 860px) {
  .page-content.page-cms .stp-hero-inner,
  .page-cms .stp-hero-inner {
    min-height: 0 !important;
    padding: 46px 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 30px !important;
  }

  .page-content.page-cms .stp-hero-title,
  .page-cms .stp-hero-title {
    font-size: 32px !important;
  }

  .page-content.page-cms .stp-hero-visual,
  .page-cms .stp-hero-visual {
    flex: none !important;
    width: 100% !important;
  }

  .page-content.page-cms .stp-section,
  .page-content.page-cms .stp-band-inner,
  .page-content.page-cms .stp-form-inner,
  .page-cms .stp-section,
  .page-cms .stp-band-inner,
  .page-cms .stp-form-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
.tv-account-wrapper {
  position: relative;
}
/* Arregla el dropdown de "Mi cuenta" fuera de sitio */
.tv-account-wrapper {
  position: relative;
}
.tv-account-dropdown {
  border: 1px solid #eaeaea;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px 0;
  min-width: 200px;
  margin-top: 8px;
}
.tv-account-dropdown a,
.tv-account-dropdown li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: #333;
  font-size: 14px;
  transition: background-color .15s ease, color .15s ease;
}
.tv-account-dropdown a:hover {
  background-color: #fdf1f1;
  color: #FF0100;
}
.tv-account-dropdown i, .tv-account-dropdown svg {
  color: #FF0100;
  font-size: 18px;
}

/* Arregla el checkbox nativo duplicado (registro, checkout, todo el sitio) */
.custom-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
/* Tarjetas para los pasos del checkout */
#checkout-personal-information-step,
#checkout-addresses-step,
#checkout-delivery-step,
#checkout-payment-step {
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  margin-bottom: 16px;
  background-color: #fff;
}

/* Identidad de marca en el header reducido de checkout */
.tvcmsdesktop-top-header-wrapper.tvheader-checkout {
  background-color: #ffffff;
  border-top: 4px solid #FF0100;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.tvcmsdesktop-top-header-wrapper.tvheader-checkout .tvcmsdesktop-top-second {
  padding: 14px 0;
}
.tvcmsdesktop-top-header-wrapper.tvheader-checkout .tv-header-logo img.logo {
  height: 42px;
  width: auto;
}
.rt-checkout-trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  justify-content: flex-end;
}
.rt-checkout-trust-badge svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #FF0100;
}
/* ==========================================================================
   PÁGINA CMS · SOBRE NOSOTROS  (prefijo .sn-)
   Añadir al final de /themes/child_v1_electron_1/assets/css/custom.css
   ========================================================================== */

/* --- Layout de la página CMS: ocultamos columnas laterales y cabecera nativa --- */
body:has(.sn-page) #left-column,
body:has(.sn-page) #right-column { display: none !important; }

body:has(.sn-page) #content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0;
  padding-right: 0;
}

body:has(.sn-page) #main .page-header,
body:has(.sn-page) #content.page-content > h1:first-child { display: none; }

body:has(.sn-page) #content.page-content,
body:has(.sn-page) #main {
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  border: 0;
  background: transparent;
}

/* --- Base --- */
.sn-page {
  color: #222;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.sn-page * { box-sizing: border-box; }
.sn-page p { margin: 0 0 14px; }
.sn-page p:last-child { margin-bottom: 0; }
.sn-page h1, .sn-page h2, .sn-page h3 {
  font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-transform: none;
}

/* Bandas a ancho completo sin provocar scroll horizontal.
   Si el contenedor del tema recorta el fondo, elimina estas 2 líneas
   (box-shadow y clip-path) y las bandas quedarán contenidas. */
.sn-bleed {
  position: relative;
  box-shadow: 0 0 0 100vmax var(--sn-bleed, #fff);
  clip-path: inset(0 -100vmax);
}

.sn-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Etiquetas y cabeceras de sección --- */
.sn-eyebrow {
  display: inline-block;
  background: #FF0100;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.sn-sec-header {
  border-bottom: 2px solid #FF0100;
  padding-bottom: 12px;
  margin-bottom: 28px;
}
.sn-sec-label {
  display: block;
  font-size: 11px;
  color: #FF0100;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.sn-sec-label p {
    color: #fff;
}
.sn-sec-title { font-size: 22px; color: #222; }
.sn-sec-title span { color: #FF0100; }

/* --- Iconos (máscaras SVG, se colorean con currentColor) --- */
.sn-ico {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.sn-hero {
  --sn-bleed: #1a1a1a;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  overflow: hidden;
}
.sn-hero .sn-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 52px;
  padding-bottom: 52px;
}
.sn-hero-content { flex: 1; min-width: 0; }
.sn-hero-title {
  font-size: 36px;
  color: #fff;
  margin-bottom: 14px;
}
.sn-hero-title span { color: #FF0100; }
.sn-hero-desc {
  font-size: 15px;
  color: #fff !important;
  max-width: 560px;
  margin-bottom: 26px;
}
.sn-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.sn-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 4px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  border: 2px solid transparent;
}
.sn-hero-btns .sn-ico, .sn-hero-btns .sn-btn-ghost { color: #ffffff !important;
width: 18px; height: 18px; }
.sn-btn-red { background: #FF0100; color: #fff; }
.sn-btn-red:hover { background: #cc0100; color: #fff; text-decoration: none; }
.sn-btn-ghost { border-color: #555; color: #fff; }
.sn-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sn-btn-wa { background: #25D366; color: #fff !important; }
.sn-btn-wa:hover { background: #1aab53; color: #fff; text-decoration: none; }
.sn-btn-dark { background: #222; color: #fff; }
.sn-btn-dark:hover { background: #000; color: #fff; text-decoration: none; }

.sn-hero-visual { flex-shrink: 0; position: relative; }
.sn-hero-visual::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at center, rgba(255,1,0,.14) 0%, transparent 70%);
}
.sn-stats {
  position: relative;
  display: flex;
  gap: 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 24px 28px;
}
.sn-stat { text-align: center; }
.sn-stat-val {
  display: block;
  font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.sn-stat-val span { color: #FF0100; }
.sn-stat-lbl {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ==========================================================================
   2 · MARQUESINA
   ========================================================================== */
.sn-marquee {
  --sn-bleed: #FF0100;
  background: #FF0100;
  overflow: hidden;
  padding: 9px 0;
}
.sn-marquee-track {
  display: flex;
  width: max-content;
  animation: sn-scroll 34s linear infinite;
}
.sn-marquee-track span {
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 600;
  padding: 0 20px;
  white-space: nowrap;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sn-marquee-track .sn-sep { color: rgba(255,255,255,.35); padding: 0 4px; }
@keyframes sn-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sn-marquee-track { animation: none; }
}

/* ==========================================================================
   3 · INTRO / QUIÉNES SOMOS
   ========================================================================== */
.sn-intro { --sn-bleed: #fff; background: #fff; }
.sn-intro .sn-inner { padding-top: 48px; padding-bottom: 48px; }
.sn-intro-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
.sn-intro-text p { color: #555; font-size: 15px; }
.sn-intro-text strong { color: #222; }

.sn-facts {
  border: 1px solid #e8e8e8;
  border-top: 3px solid #FF0100;
  border-radius: 4px;
  padding: 22px 24px;
  background: #fafafa;
}
.sn-facts h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #222;
  margin-bottom: 16px;
}
.sn-facts ul { list-style: none; margin: 0; padding: 0; }
.sn-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #555;
  padding: 9px 0;
  border-bottom: 1px solid #ececec;
}
.sn-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.sn-facts li .sn-ico { color: #FF0100; width: 18px; height: 18px; margin-top: 2px; }

/* ==========================================================================
   4 · DOS ÁREAS
   ========================================================================== */
.sn-worlds { --sn-bleed: #f4f4f4; background: #f4f4f4; }
.sn-worlds .sn-inner { padding-top: 48px; padding-bottom: 48px; }
.sn-worlds-head { text-align: center; margin-bottom: 30px; }
.sn-worlds-head .sn-sec-label { color: #888; }
.sn-worlds-head h2 { font-size: 24px; }
.sn-worlds-head h2 span { color: #FF0100; }
.sn-worlds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sn-world {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.sn-world:hover { border-color: #FF0100; box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.sn-world-top {
  padding: 22px 24px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sn-world--parts .sn-world-top { background: linear-gradient(135deg, #FF0100 0%, #b30100 100%); }
.sn-world--appliances .sn-world-top { background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%); }
.sn-world-top .sn-ico { width: 30px; height: 30px; color: #fff; }
.sn-world-tag {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .75;
  margin-bottom: 3px;
}
.sn-world-top h3 { font-size: 19px; color: #fff; }
.sn-world-body { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; }
.sn-world-body p { color: #666; font-size: 14px; }
.sn-world-body ul { list-style: none; margin: 0 0 18px; padding: 0; }
.sn-world-body li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #555; padding: 5px 0;
}
.sn-world-body li .sn-ico { width: 15px; height: 15px; color: #FF0100; }
.sn-world-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #FF0100;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
}
.sn-world-cta .sn-ico { width: 15px; height: 15px; transition: transform .2s; }
.sn-world:hover .sn-world-cta .sn-ico { transform: translateX(4px); }

/* ==========================================================================
   5 · POR QUÉ ELEGIRNOS
   ========================================================================== */
.sn-why { --sn-bleed: #fff; background: #fff; }
.sn-why .sn-inner { padding-top: 48px; padding-bottom: 48px; }
.sn-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.sn-why-card {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 24px 20px;
  transition: border-color .2s, box-shadow .2s;
}
.sn-why-card:hover { border-color: #FF0100; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.sn-why-card .sn-ico {
  width: 26px; height: 26px;
  color: #FF0100;
  margin-bottom: 14px;
}
.sn-why-card h3 { font-size: 15px; margin-bottom: 8px; }
.sn-why-card p { font-size: 13px; color: #666; line-height: 1.6; }

/* ==========================================================================
   6 · CÓMO TE AYUDAMOS (proceso, el orden sí importa)
   ========================================================================== */
.sn-steps { --sn-bleed: #f8f8f8; background: #f8f8f8; }
.sn-steps .sn-inner { padding-top: 48px; padding-bottom: 48px; }
.sn-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: sn-step; }
.sn-step {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 24px;
  position: relative;
}
.sn-step-num {
  display: inline-block;
  font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #222;
  width: 28px; height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  margin-bottom: 14px;
}
.sn-step h3 { font-size: 15px; margin-bottom: 8px; }
.sn-step p { font-size: 13px; color: #666; }
.sn-intro p {
    color: #555 !important;
}

/* ==========================================================================
   7 · BANDA DE CONTACTO
   ========================================================================== */
.sn-cta { --sn-bleed: #222; background: #222; }
.sn-cta .sn-inner {
  padding-top: 44px;
  padding-bottom: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.sn-cta-text .sn-sec-label { color: #FF0100; }
.sn-cta-text h2 { font-size: 26px; color: #fff; margin-bottom: 10px; }
.sn-cta-text p { color: #999; font-size: 14px; }
.sn-cta-btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.sn-cta-btns .sn-btn { width: 290px; justify-content: center; font-size: 15px; padding: 13px 22px; }
.sn-cta-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #777;
}
.sn-cta-note .sn-ico { width: 15px; height: 15px; color: #777; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .sn-why-grid { grid-template-columns: repeat(2, 1fr); }
  .sn-hero .sn-inner { gap: 28px; }
  .sn-hero-title { font-size: 30px; }
}

@media (max-width: 767px) {
  .sn-hero .sn-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .sn-hero-title { font-size: 25px; }
  .sn-hero-desc { font-size: 14px; }
  .sn-hero-btns { width: 100%; }
  .sn-hero-btns .sn-btn { flex: 1; justify-content: center; }
  .sn-hero-visual { width: 100%; }
  .sn-stats { justify-content: space-around; gap: 12px; padding: 18px 14px; width: 100%; }
  .sn-stat-val { font-size: 21px; }

  .sn-intro-grid,
  .sn-worlds-grid,
  .sn-steps-grid,
  .sn-why-grid { grid-template-columns: 1fr; }

  .sn-intro .sn-inner,
  .sn-worlds .sn-inner,
  .sn-why .sn-inner,
  .sn-steps .sn-inner { padding-top: 34px; padding-bottom: 34px; }

  .sn-sec-title, .sn-worlds-head h2 { font-size: 19px; }
  .sn-cta .sn-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 34px; padding-bottom: 34px; }
  .sn-cta-text h2 { font-size: 21px; }
  .sn-cta-btns { align-items: stretch; }
  .sn-cta-btns .sn-btn { width: 100%; }
  .sn-cta-note { justify-content: center; }
}

/* --- Iconos SVG en línea (máscaras) --- */
.sn-i-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.sn-i-tool{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E")}
.sn-i-washer{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Ccircle cx='12' cy='14' r='4.5'/%3E%3Cline x1='8' y1='6' x2='8' y2='6'/%3E%3Cline x1='11' y1='6' x2='11' y2='6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Ccircle cx='12' cy='14' r='4.5'/%3E%3Cline x1='8' y1='6' x2='8' y2='6'/%3E%3Cline x1='11' y1='6' x2='11' y2='6'/%3E%3C/svg%3E")}
.sn-i-truck{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='14' height='12' rx='1'/%3E%3Cpath d='M15 8h4l3 3v5h-7z'/%3E%3Ccircle cx='6' cy='18.5' r='2'/%3E%3Ccircle cx='18' cy='18.5' r='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='14' height='12' rx='1'/%3E%3Cpath d='M15 8h4l3 3v5h-7z'/%3E%3Ccircle cx='6' cy='18.5' r='2'/%3E%3Ccircle cx='18' cy='18.5' r='2'/%3E%3C/svg%3E")}
.sn-i-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 11 11.5 13.5 15.5 9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 11 11.5 13.5 15.5 9'/%3E%3C/svg%3E")}
.sn-i-support{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'/%3E%3Cpath d='M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'/%3E%3Cpath d='M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E")}
.sn-i-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.sn-i-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.sn-i-arrow{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E")}
.sn-i-whatsapp{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.6-5.6c-.3-.1-1.6-.8-1.9-.9-.2-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.6.1-1.5-.7-2.5-1.3-3.5-3-.3-.5.3-.4.8-1.4.1-.2 0-.3 0-.5s-.6-1.5-.9-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.7.7-1 1.6-1 2.5 0 1.5 1.1 2.9 1.2 3.1.2.2 2.2 3.3 5.2 4.6 1.9.8 2.7.9 3.6.8.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.2-.6-.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.6-5.6c-.3-.1-1.6-.8-1.9-.9-.2-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.6.1-1.5-.7-2.5-1.3-3.5-3-.3-.5.3-.4.8-1.4.1-.2 0-.3 0-.5s-.6-1.5-.9-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.7.7-1 1.6-1 2.5 0 1.5 1.1 2.9 1.2 3.1.2.2 2.2 3.3 5.2 4.6 1.9.8 2.7.9 3.6.8.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.2-.6-.4z'/%3E%3C/svg%3E")}