/*
Theme Name: Ricsu Motos
Theme URI: https://ricsumotos.com
Author: Ricsu Motos
Description: Catálogo de motos multimarca — diseño deportivo oscuro
Version: 2.0
Text Domain: ricsu
*/

/* ══════════════════════════════════════════════════
   VARIABLES GLOBALES
══════════════════════════════════════════════════ */
:root {
  /* Paleta CENTRALIZADA en header.php (única fuente). Aquí solo alias + medidas. */
  --surface3:  var(--surface2);
  --text-dim:  var(--icon);
  --text-dark: var(--text-muted);
  --green-wa:  var(--wa-green);
  --topbar-h:     34px;
  --header-h:     66px;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', sans-serif;
  --ease:         cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--font-body); cursor: pointer; }
ul, ol { list-style: none; }

/* ══════════════════════════════════════════════════
   LOGO — FIX TAMAÑO
══════════════════════════════════════════════════ */
.site-header .custom-logo-link,
.site-header .site-logo a {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.site-header .custom-logo-link img,
.site-header .site-logo a img,
.site-header img.custom-logo,
.site-header .custom-logo {
  height: 54px !important;
  width: auto !important;
  max-width: 200px !important;
  max-height: 54px !important;
  min-height: unset !important;
  min-width: unset !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  filter: none !important;
}
@media (max-width: 768px) {
  :root { --topbar-h: 0px; --header-h: 58px; }
  .site-header .custom-logo-link img,
  .site-header img.custom-logo {
    height: 54px !important;
    max-width: 160px !important;
    max-height: 54px !important;
  }
}

/* ══════════════════════════════════════════════════
   CONTENEDOR GLOBAL
══════════════════════════════════════════════════ */
.container,
.ri-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.8rem;
}

/* ══════════════════════════════════════════════════
   TIPOGRAFÍA
══════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: .04em; line-height: 1.1; color: var(--white); }
p { margin-bottom: 1rem; }
strong { font-weight: 700; }

/* ══════════════════════════════════════════════════
   SITE MAIN
══════════════════════════════════════════════════ */
.site-main { min-height: 60vh; }

/* ══════════════════════════════════════════════════
   WOOCOMMERCE — RESET CONFLICTOS
══════════════════════════════════════════════════ */
.woocommerce,
.woocommerce-page {
  background: var(--bg);
}
.woocommerce #primary,
.woocommerce-page #primary,
.woocommerce #content,
.woocommerce-page #content,
.woocommerce #main,
.woocommerce .site-main {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce .col2-set,
.woocommerce-page .col2-set { width: 100% !important; }
.woocommerce ul.products,
.woocommerce-page ul.products { margin: 0 !important; padding: 0 !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════
   CATÁLOGO — LAYOUT PRINCIPAL
══════════════════════════════════════════════════ */
.shop-page {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  align-items: start !important;
  min-height: 80vh;
  background: var(--surface);
  width: 100% !important;
}

/* Panel de filtros */
.shop-filters {
  background: var(--bg-deep) !important;
  border-right: 1px solid var(--ink) !important;
  padding: 1.2rem 1rem !important;
  width: 240px !important;
  min-width: 240px !important;
  position: sticky !important;
  top: calc(var(--topbar-h) + var(--header-h)) !important;
  height: calc(100vh - var(--topbar-h) - var(--header-h)) !important;
  overflow-y: auto !important;
  float: none !important;
}
.shop-filters::-webkit-scrollbar { width: 4px; }
.shop-filters::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 2px; }

/* Zona principal catálogo */
.shop-main {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 1.2rem 1.4rem !important;
  background: var(--surface) !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Grid de motos */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Acordeones filtros — sin azul */
.shop-filters .filter-accordion,
.shop-filters .accordion {
  background: transparent !important;
  border: 1px solid #252525 !important;
  border-radius: 4px !important;
  margin-bottom: 5px !important;
  overflow: hidden !important;
}
.shop-filters .accordion-header,
.shop-filters .filter-accordion .accordion-header {
  background: var(--surface) !important;
  color: var(--muted-2) !important;
  border-left: 2px solid transparent !important;
  border-top: none !important; border-right: none !important; border-bottom: none !important;
  padding: 9px 10px !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  cursor: pointer !important;
}
.shop-filters .accordion-header.open {
  background: var(--surface2) !important;
  color: var(--white) !important;
  border-left-color: var(--red) !important;
}
.shop-filters .accordion-content,
.shop-filters .filter-accordion .accordion-content {
  background: linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%) !important;
  border-top: 1px solid #252525 !important;
  padding: 10px !important;
}

/* ══════════════════════════════════════════════════
   TARJETAS DE MOTO
══════════════════════════════════════════════════ */
.ri-moto-card {
  background: var(--surface2) !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: 6px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
  width: 100% !important;
  min-width: 0 !important;
}
.ri-moto-card:hover {
  border-color: var(--red) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px var(--red-glow) !important;
}
.ri-moto-thumb {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16/10 !important;
  border-radius: 6px 6px 0 0 !important;
  background: linear-gradient(to bottom, #f0f0f0 0%, #e8e8e8 40%, #c0c0c0 65%, #888 80%, #3a3a3a 100%) !important;
}
/* Línea roja con fade en extremos */
.ri-moto-thumb::after {
  content: '' !important; position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 1.5px !important;
  background: linear-gradient(to right, transparent 0%, var(--red) 25%, var(--red) 75%, transparent 100%) !important;
  z-index: 3 !important;
}
/* Sombra de suelo */
.ri-moto-thumb::before {
  content: '' !important; position: absolute !important;
  bottom: 3px !important; left: 8% !important; width: 84% !important; height: 10px !important;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, transparent 70%) !important;
  z-index: 2 !important; pointer-events: none !important;
}
.ri-moto-img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; object-position: center bottom !important;
  display: block !important; position: relative !important; z-index: 1 !important;
  transition: transform .35s ease !important;
}
.ri-moto-card:hover .ri-moto-img { transform: scale(1.04) !important; }

/* Badge categoría — oculto, info ya está en pills */
.ri-cat-badge { display: none !important; }

/* Badge sin stock */
.ri-stock-badge {
  position: absolute !important; top: 8px !important; right: 8px !important;
  left: auto !important;
  background: var(--red) !important; color: var(--white) !important;
  font-size: 8px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  padding: 3px 8px !important; border-radius: 2px !important;
  border: none !important; z-index: 3 !important;
  box-shadow: 0 2px 8px color-mix(in srgb,var(--red) 40%,transparent) !important;
}
.ri-stock-overlay {
  position: absolute !important; inset: 0 !important;
  background: rgba(0,0,0,.52) !important; z-index: 1 !important;
}

/* Info de la tarjeta */
.ri-moto-body { padding: 10px 12px 6px !important; flex: 1 !important; }
.ri-moto-marca {
  font-size: 11px !important; color: var(--text-muted) !important;
  letter-spacing: .10em !important; text-transform: uppercase !important; margin-bottom: 3px !important;
  font-family: var(--font-body) !important; font-weight: 700 !important;
}
.ri-moto-nombre {
  font-family: var(--font-display) !important;
  font-size: 22px !important; letter-spacing: .04em !important;
  line-height: 1.1 !important; margin-bottom: 7px !important;
}
.ri-moto-nombre a { color: var(--text) !important; text-decoration: none !important; }
.ri-moto-card:hover .ri-moto-nombre a { color: var(--red) !important; }
.ri-moto-specs { display: flex !important; gap: 4px !important; flex-wrap: wrap !important; margin-bottom: 8px !important; }
/* Pills — sin borde rojo, igual que motos destacadas */
.ri-spec-pill {
  background: var(--border-lt) !important; border: 1px solid var(--border-hover) !important;
  color: var(--muted-light) !important; font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: .05em !important; text-transform: uppercase !important;
  padding: 3px 9px !important; border-radius: 3px !important;
}
.ri-moto-precio { font-size: 15px !important; font-weight: 700 !important; color: var(--red) !important; }
.ri-moto-card.sin-stock .ri-moto-precio { color: var(--muted-2) !important; text-decoration: line-through !important; }
/* Etiqueta "Precio ref." junto al precio (catálogo, destacadas, ficha y financiamiento) */
.ri-pref-tag { display:inline-block; vertical-align:middle; margin-left:6px; font-family:'Inter',sans-serif; font-size:9px; font-weight:600; letter-spacing:.03em; line-height:1; color:var(--muted-2) !important; text-transform:none !important; white-space:nowrap; opacity:.85; }

/* ══════════════════════════════════════════════════
   BARRA SUPERIOR CATÁLOGO
══════════════════════════════════════════════════ */
.currency-bar {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 7px 12px !important; background: var(--surface2) !important;
  border: 1px solid var(--border-hover) !important; border-radius: 4px !important; margin-bottom: .8rem !important;
}
.tc-label { font-size: 10px !important; color: var(--muted-2) !important; }
.tc-label span { color: var(--muted-2) !important; font-weight: 600 !important; }
.catalog-topbar {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  margin-bottom: .7rem !important; padding-bottom: .7rem !important;
  border-bottom: 1px solid var(--border) !important; flex-wrap: wrap !important; gap: .5rem !important;
}
.catalog-count { font-size: 12px !important; color: var(--muted-2) !important; }
.catalog-count strong { color: var(--white) !important; font-weight: 700 !important; }

/* Paginación */
.shop-pagination { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; }
.shop-pagination .page-numbers { display: flex !important; gap: 5px !important; align-items: center !important; }
.shop-pagination .page-numbers a,
.shop-pagination .page-numbers span {
  width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--surface2) !important; border: 1px solid var(--border-hover) !important;
  border-radius: 3px !important; font-size: 11px !important; font-weight: 600 !important;
  color: var(--muted-2) !important; text-decoration: none !important; transition: all .18s !important;
}
.shop-pagination .page-numbers a:hover { border-color: var(--red) !important; color: var(--red) !important; }
.shop-pagination .page-numbers .current { background: var(--red) !important; border-color: var(--red) !important; color: var(--white) !important; }

/* ══════════════════════════════════════════════════
   PÁGINA DE INICIO — SECCIONES
══════════════════════════════════════════════════ */
.ri-section { padding: 5rem 0; }
.ri-section--dark { background: var(--bg-deep); }
.ri-section--mid  { background: var(--surface); }
.ri-section--base { background: var(--bg); }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.site-footer {
  background: var(--bg-deep) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  border-top: 1px solid var(--border) !important;
}
.footer-grid img,
.footer-col--brand .custom-logo-link img,
.footer-col--brand img.custom-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
}

/* ══════════════════════════════════════════════════
   WHATSAPP FLOTANTE
══════════════════════════════════════════════════ */
.wsp-float, .wsp-float * { z-index: 999 !important; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .shop-page { grid-template-columns: 200px 1fr !important; }
  .shop-filters { width: 200px !important; min-width: 200px !important; }
}

/* ── TABLET (768px-900px): compensar barra filtrar fija ── */
@media (max-width: 900px) {
  body.woocommerce.post-type-archive-product,
  body.woocommerce-page.post-type-archive-product {
    padding-top: calc(var(--topbar-h) + var(--header-h) + 38px) !important;
  }
}

@media (max-width: 768px) {
  body { padding-top: var(--header-h) !important; }
  /* Móvil sin topbar: compensar barra filtrar fija */
  body.woocommerce.post-type-archive-product,
  body.woocommerce-page.post-type-archive-product {
    padding-top: calc(var(--header-h) + 38px) !important;
  }
  .shop-page { grid-template-columns: 1fr !important; }
  .shop-filters {
    position: fixed !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important; top: auto !important;
    width: 100% !important; min-width: unset !important;
    height: 85vh !important; z-index: 200 !important;
    transform: translateY(100%) !important;
    transition: transform .3s var(--ease) !important;
    border-right: none !important; border-top: 1px solid var(--ink) !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .shop-filters.open { transform: translateY(0) !important; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr !important; }
  .ri-moto-actions { gap: 4px !important; }
  .ri-card-ibtn { width: 30px !important; height: 30px !important; }
}


/* FORZAR GRID CATÁLOGO */
.woocommerce .products.columns-3,
.woocommerce-page .products.columns-3,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════
   SINGLE PRODUCT — RESPONSIVE FIXES
   (deben ir aquí para superar especificidad de WooCommerce)
══════════════════════════════════════════ */

/* Imagen galería: nunca height:auto en el single product */
.ri-sp-gal-main img.ri-sp-main-img {
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
}

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {

  /* Contenedor: sin desborde horizontal */
  .ri-sp-wrap {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Galería: 100% del ancho, sin salirse */
  .ri-sp-gal-col,
  .ri-sp-gal-sticky,
  .ri-sp-gal-main {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Imagen principal: contenida siempre */
  .ri-sp-main-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Quick specs: grid 4 col, sin overflow */
  .ri-sp-qs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  .ri-sp-qsi {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 8px 3px !important;
  }
  .ri-sp-qsv { font-size: 11px !important; word-break: break-word !important; }
  .ri-sp-qsl { font-size: 7px !important; }

  /* Miniaturas: scrollbar roja visible */
  .ri-sp-thumbs {
    scrollbar-width: thin !important;
    scrollbar-color: var(--red) var(--steel-bg) !important;
  }
  .ri-sp-thumbs::-webkit-scrollbar { height: 3px !important; display: block !important; }
  .ri-sp-thumbs::-webkit-scrollbar-thumb { background: var(--red) !important; border-radius: 2px !important; }

  /* Info: 1 columna, sin overflow */
  .ri-sp-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Pills: wrap */
  .ri-sp-pills { flex-wrap: wrap !important; max-width: 100% !important; }
  .ri-spec-pill { flex-shrink: 0 !important; }

  /* Desc corta: sin overflow */
  .ri-sp-short {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Botón WA: full width */
  .ri-sp-btn-wa {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Tabs: scrollbar roja visible */
  .ri-sp-tabs-nav {
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--red) var(--steel-deep) !important;
    padding-bottom: 3px !important;
  }
  .ri-sp-tabs-nav::-webkit-scrollbar { height: 3px !important; display: block !important; }
  .ri-sp-tabs-nav::-webkit-scrollbar-thumb { background: var(--red) !important; border-radius: 2px !important; }
  .ri-sp-tabs-nav::-webkit-scrollbar-track { background: var(--bg-deep) !important; }

  /* Grid principal: 1 columna */
  .ri-sp-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ri-sp-gal-col { position: static !important; }
  .ri-sp-fin-grid { grid-template-columns: 1fr !important; }
}

/* ── Móvil (≤600px) ── */
@media (max-width: 600px) {

  /* Toggle más pequeño */
  .ri-sp-cur-toggle { padding: 3px 7px !important; gap: 5px !important; }
  .ri-sp-cur-lbl { font-size: 9px !important; }
  .ri-sp-cur-track { width: 26px !important; height: 14px !important; }
  .ri-sp-cur-knob { width: 9px !important; height: 9px !important; }

  /* Precio */
  .ri-sp-pval { font-size: 22px !important; }

  /* Quick specs más compactos */
  .ri-sp-qsv { font-size: 10px !important; }
  .ri-sp-qsl { font-size: 6.5px !important; }
  .ri-sp-qsi { padding: 8px 3px !important; }

  /* Specs: labels más pequeños */
  .ri-sp-spec-lbl { font-size: 6.5px !important; padding: 3px 4px !important; }
}

/* ── Móvil pequeño (≤390px) ── */
@media (max-width: 390px) {
  .ri-sp-spec-lbl { font-size: 6px !important; padding: 3px !important; }
  .ri-sp-tab { padding: 0 8px !important; font-size: 8.5px !important; }
  .ri-sp-nombre { font-size: 20px !important; }
  .ri-sp-qsv { font-size: 9px !important; }
  .ri-sp-cur-lbl { font-size: 8px !important; }
  .ri-sp-cur-track { width: 22px !important; height: 12px !important; }
  .ri-sp-cur-knob { width: 8px !important; height: 8px !important; }
}

/* ══════════════════════════════════════════
   BRAND PANEL — RESPONSIVE (supera !important de WooCommerce)
══════════════════════════════════════════ */

/* Fix global: logo img no debe colapsar con height:auto */
.ri-sp-brand-logo-img {
  width: 85% !important;
  height: 85% !important;
  object-fit: contain !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}

/* ── Tablet y Móvil (≤900px): top-row en fila, cats 2 por fila ── */
@media (max-width: 900px) {
  .ri-sp-brand-panel { grid-template-columns: 1fr !important; }

  .ri-sp-brand-top-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .ri-sp-brand-logo-wrap {
    aspect-ratio: 1/1 !important;
    max-height: none !important;
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ri-sp-brand-stat {
    aspect-ratio: 1/1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ri-sp-brand-stat-val { font-size: 46px !important; }
  .ri-sp-brand-cats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    flex-direction: unset !important;
  }
  .ri-sp-brand-logo-img {
    width: 80% !important;
    height: 80% !important;
    object-fit: contain !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
  }
}

/* ── Móvil (≤600px): igual estructura, más compacto ── */
@media (max-width: 600px) {
  .ri-sp-brand-top-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .ri-sp-brand-logo-wrap {
    aspect-ratio: 1/1 !important;
    max-height: none !important;
    padding: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ri-sp-brand-stat {
    aspect-ratio: 1/1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ri-sp-brand-stat-val { font-size: 34px !important; }
  .ri-sp-brand-stat-lbl { font-size: 8px !important; }
  .ri-sp-brand-cats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    flex-direction: unset !important;
  }
  .ri-sp-brand-cat-name { font-size: 8.5px !important; }
  .ri-sp-brand-logo-img {
    width: 80% !important;
    height: 80% !important;
    object-fit: contain !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
  }
}


/* ══════════════════════════════════════════
   TARJETA DE MOTO (content-product.php)
   Movido desde CSS inline para carga única
══════════════════════════════════════════ */
.ri-moto-card{background:var(--surface-3);border:1px solid var(--border-hover);border-radius:6px;overflow:visible;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s}
.ri-moto-card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 8px 28px color-mix(in srgb,var(--red) 18%,transparent)}
.ri-moto-card.sin-stock{opacity:.82}
.ri-moto-link{text-decoration:none;display:block}
.ri-moto-thumb{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:6px 6px 0 0;background:linear-gradient(to bottom,#f0f0f0 0%,#e8e8e8 40%,#c0c0c0 65%,#888 80%,#3a3a3a 100%)}
.ri-moto-thumb::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1.5px;background:linear-gradient(to right,transparent 0%,var(--red) 25%,var(--red) 75%,transparent 100%);z-index:3}
.ri-moto-thumb::before{content:'';position:absolute;bottom:3px;left:8%;width:84%;height:10px;background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0%,transparent 70%);z-index:2;pointer-events:none}
.ri-moto-img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:transform .35s ease;display:block;position:relative;z-index:1}
.ri-moto-card:hover .ri-moto-img{transform:scale(1.04)}
.ri-moto-no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--border-hover);font-size:32px}
.ri-cat-badge{position:absolute;top:8px;left:8px;background:var(--red);color:var(--white);font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:2px;z-index:2}
.ri-stock-badge{position:absolute;top:8px;right:8px;background:var(--red);color:var(--white);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px;border:none;z-index:3;box-shadow:0 2px 8px color-mix(in srgb,var(--red) 40%,transparent)}
.ri-stock-overlay{position:absolute;inset:0;background:rgba(0,0,0,.52);z-index:1}
.ri-moto-body{padding:10px 12px 6px;flex:1}
.ri-moto-marca{font-size:9px;color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
.ri-moto-nombre{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:.04em;line-height:1.1;margin-bottom:7px}
.ri-moto-nombre a{color:var(--text);text-decoration:none;transition:color .18s}
.ri-moto-card:hover .ri-moto-nombre a{color:var(--red)}
.ri-moto-specs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.ri-spec-pill{background:var(--border-lt);border:1px solid var(--border-hover);color:var(--muted-light);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:3px}
.ri-moto-precio{font-size:15px;font-weight:700;color:var(--red)}
.ri-moto-card.sin-stock .ri-moto-precio{color:var(--icon);text-decoration:line-through}
/* Botones de acción (.ri-card-ibtn) ahora son autocontenidos en content-product.php e index.php */

/* ══════════════════════════════════════════
   TOOLTIPS — solo con mouse real
   Sin hover:hover = táctil → tooltips CSS desactivados
══════════════════════════════════════════ */

/* Por defecto (sin mouse): tooltips invisibles */
.ri-card-ibtn::before,
.ri-card-ibtn::after,
.ri-sp-ibtn::before,
.ri-sp-ibtn::after {
  display: none !important;
}

/* Solo si el dispositivo tiene mouse/puntero fino: activar tooltips */
@media (hover: hover) and (pointer: fine) {
  .ri-card-ibtn::before { display: block !important; }
  .ri-card-ibtn::after  { display: block !important; }
  .ri-sp-ibtn::before   { display: block !important; }
}

/* Toast feedback favoritos/comparar — todos los dispositivos */
.ri-toast {
  position: absolute;
  background: var(--steel-bg-2);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid var(--steel-bd-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 9999;
  white-space: nowrap;
}
.ri-toast.show {
  opacity: 1;
}

/* Auto-hide tooltip después de 1.2s con mouse */
.ri-tip-hidden::before,
.ri-tip-hidden::after {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fix: en táctil deshabilitar :hover para que no quede pegado post-tap */
@media (hover: none) {
  .ri-card-ibtn:hover:not(.active),
  .ri-card-ibtn:focus:not(.active) {
    color: var(--icon) !important;
    border-color: var(--border-lt) !important;
    background: var(--card-btn-bg) !important;
  }
  .ri-sp-ibtn:hover:not(.active),
  .ri-sp-ibtn:focus:not(.active) {
    color: var(--steel-muted) !important;
    border-color: var(--border-lt) !important;
    background: #1e2230 !important;
  }
}