/*
  Ludoteka - Categoría v4 (definitivo)
  Objetivo:
  - Cards consistentes y responsivas
  - “AGOTADO” como overlay sin romper layout
  - Footer con cantidad + botón alineado

  Cárgalo al final (después de style.css / ludoteka-home-v4.css).
*/

/* =============================
   CARD
============================= */

.ltk-card-col { display: flex; }

.ltk-card {
  background: #fff;
  border: 1px solid rgba(220, 226, 232, 0.9);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ltk-card-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ltk-card-link:hover { text-decoration: none; }

/* =============================
   THUMB / IMAGE
============================= */

.ltk-card-thumb {
  position: relative;
  height: 220px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(220, 226, 232, 0.55);
}

.ltk-card-thumb img {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* =============================
   SOLD OUT RIBBON
============================= */

.ltk-ribbon {
  position: absolute;
  left: -22px;
  top: 18px;
  z-index: 3;
  transform: rotate(-18deg);
  background: #d50000;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 12px;
  padding: 10px 44px;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  text-transform: uppercase;
}

.ltk-card--soldout .ltk-card-thumb img {
  filter: grayscale(0.15);
}

/* =============================
   BODY
============================= */

.ltk-card-body {
  padding: 16px 18px;
}

.ltk-card-title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  color: #111827;
}

.ltk-card-subtitle {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.35;
  color: #6b7280;
}

/* =============================
   PRICE
============================= */

.ltk-price { margin-top: 10px; }

.ltk-badge-offer {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.ltk-price-old {
  color: #9ca3af;
  text-decoration: line-through;
  margin-bottom: 2px;
}

.ltk-price-now {
  color: #dc2626;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.ltk-points {
  margin-top: 6px;
  color: #0ea5e9;
  font-size: 13px;
}

.ltk-used-tag {
  display: inline-block;
  margin-top: 10px;
  background: #111827;
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}

/* Texto vendido */
.ltk-soldout-text {
  color: #ef4444;
  font-size: 13px;
  line-height: 1.4;
  margin: 8px 0 0;
}

/* =============================
   FOOTER (qty + button)
============================= */

.ltk-card-footer {
  margin-top: auto;
  padding: 14px 18px 18px;
}

.ltk-qtybar {
  width: 100%;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(220, 226, 232, 0.9);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.ltk-qtybar input {
  width: 72px;
  border: 0;
  border-right: 1px solid rgba(220, 226, 232, 0.9);
  height: 44px;
  font-size: 14px;
}

.ltk-qtybar input:focus {
  outline: none;
  box-shadow: none;
}

.ltk-qtybar button {
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
}

.ltk-qtybar .feather-shopping-cart {
  width: 18px;
  height: 18px;
}

/* =============================
   Responsive tweaks
============================= */

@media (max-width: 575.98px) {
  .ltk-card-thumb { height: 200px; }
  .ltk-card-title { font-size: 15px; }
  .ltk-price-now { font-size: 20px; }
}



/* =========================================================
   CATEGORÍA — “Compact cards” (reduce altura sin romper diseño)
   Pegar al FINAL de ludoteka-categoria-v4.css
   ========================================================= */

/* 1) Thumb más bajo (principal fuente de altura) */
.store-page .ltk-card-thumb{
  height: 160px; /* antes 220 */
}

/* 2) Menos padding en cuerpo y footer */
.store-page .ltk-card-body{
  padding: 12px 14px; /* antes 16px 18px */
}
.store-page .ltk-card-footer{
  padding: 10px 14px 14px; /* antes 14px 18px 18px */
}

/* 3) Título y subtítulo: clamp para que no “estiren” la card */
.store-page .ltk-card-title{
  font-size: 15px;
  margin: 0 0 6px;
  line-height: 1.2;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* máximo 2 líneas */
  overflow: hidden;
}

.store-page .ltk-card-subtitle{
  font-size: 12.5px;
  margin: 0 0 8px;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* máximo 2 líneas */
  overflow: hidden;
}

/* 4) Bloque precio: más compacto (menos “aire” vertical) */
.store-page .ltk-price{
  margin-top: 6px;
}

/* Badge de oferta más chico */
.store-page .ltk-badge-offer{
  padding: 5px 10px;
  font-size: 11px;
  margin-bottom: 6px;
}

/* Precio old y now más “juntos” visualmente */
.store-page .ltk-price-old{
  font-size: 12.5px;
  margin-bottom: 0;
  display: inline-block;
  margin-right: 8px;
}
.store-page .ltk-price-now{
  font-size: 20px;   /* antes 22 */
  line-height: 1.05;
  display: inline-block;
}

/* LudoPesos: que no aumente altura (1 línea) */
.store-page .ltk-points{
  font-size: 12px;
  margin-top: 6px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5) “AGOTADO”: acota el texto largo para no disparar altura */
.store-page .ltk-soldout-text{
  font-size: 12.5px;
  margin-top: 8px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* máximo 2 líneas */
  overflow: hidden;
}

/* 6) Barra qty: un poco más baja */
.store-page .ltk-qtybar input,
.store-page .ltk-qtybar button{
  height: 40px;  /* antes 44 */
}
.store-page .ltk-qtybar input{
  width: 64px;   /* antes 72 */
  font-size: 14px;
}

/* 7) Ajuste fino en mobile */
@media (max-width: 575.98px){
  .store-page .ltk-card-thumb{ height: 150px; }
  .store-page .ltk-price-now{ font-size: 19px; }
}

/* =========================================================
   CATEGORÍA — Patch 2: portada más protagonista + gap entre filas
   Pegar al FINAL de ludoteka-categoria-v4.css
   ========================================================= */

/* A) Más espacio para la imagen (sin volver a cards gigantes) */
.store-page .ltk-card-thumb{
  height: 190px;            /* sube desde 160 (queda más natural) */
  padding: 10px 12px;       /* le das “marco” controlado */
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-page .ltk-card-thumb img:not(.badge-garantia){
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* importante: que no quede “enano” dentro del thumb */
  transform: scale(1.08);   /* agranda sutilmente sin pixelar */
  transform-origin: center;
}

/* B) Separación vertical real entre filas de cards
   (funciona incluso si Bootstrap no está usando gap) */
.store-page .product-row{
  row-gap: 20px;            /* distancia vertical entre filas */
}

/* C) Backup por si el row-gap no aplica por estructura/override */
.store-page .product-row > [class*="col-"]{
  margin-bottom: 20px;
}

/* D) Ajuste leve de separación interna para que el aumento de thumb
   no vuelva a “inflar” demasiado */
.store-page .ltk-card-body{
  padding: 12px 14px;
}
.store-page .ltk-card-footer{
  padding: 10px 14px 14px;
}

/* E) Mobile: mantener portada visible sin comerse la pantalla */
@media (max-width: 575.98px){
  .store-page .ltk-card-thumb{ height: 180px; }
  .store-page .product-row{ row-gap: 16px; }
  .store-page .product-row > [class*="col-"]{ margin-bottom: 16px; }
}

/* =========================================================
   CATEGORÍA — Patch 3: imagen grande + separación entre filas garantizada
   Pegar al FINAL de ludoteka-categoria-v4.css
   ========================================================= */

/* 1) Separación vertical entre filas: dásela a la CARD (lo más robusto) */
.store-page .ltk-card{
  margin-bottom: 22px !important;
}

/* Si tu card no se llama .ltk-card, deja también este fallback */
.store-page .card{
  margin-bottom: 22px !important;
}

/* 2) Imagen: que de verdad ocupe el área (sin “aire” innecesario) */
.store-page .ltk-card-thumb{
  height: 210px !important;        /* más alto */
  padding: 6px 8px !important;     /* menos padding = imagen más grande */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fuerza al <img> a llenar el thumb */
.store-page .ltk-card-thumb img:not(.badge-garantia){
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;

  /* elimina límites típicos que achican */
  max-width: none !important;
  max-height: none !important;

  /* agranda un poco (controlado) */
  transform: scale(1.14);
  transform-origin: center;
}

/* 3) Si el layout usa <a><img> o wrappers, asegúrate que el wrapper también llene */
.store-page .ltk-card-thumb a,
.store-page .ltk-card-thumb picture{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 4) Mobile: mantiene buena portada sin comerse pantalla */
@media (max-width: 575.98px){
  .store-page .ltk-card-thumb{ height: 190px !important; }
  .store-page .ltk-card,
  .store-page .card{ margin-bottom: 16px !important; }
}

/* =========================================================
   CATEGORÍA — Mejora: bloque de precio más moderno y compacto
   ========================================================= */

/* Contenedor del bloque precio: reduce saltos */
.store-page .ltk-price{
  margin-top: 8px;
}

/* Fila superior: badge + precio antiguo en una misma línea */
.store-page .ltk-price-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

/* Si tu HTML no tiene .ltk-price-top, aplicamos “auto” sobre los elementos comunes */
.store-page .ltk-badge-offer{
  flex: 0 0 auto;
}
.store-page .ltk-price-old{
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 12.5px;
}

/* Precio actual: menos “bloque” y más elegante */
.store-page .ltk-price-now{
  font-size: 21px;
  line-height: 1.05;
  margin: 0;
}

/* LudoPesos: una línea, sin empujar altura */
.store-page .ltk-points{
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover sutil: eleva card y destaca borde */
.store-page .ltk-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.store-page .ltk-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.08);
}

/* Imagen: micro-zoom suave al hover */
.store-page .ltk-card:hover .ltk-card-thumb img:not(.badge-garantia){
  transform: scale(1.18);
  transition: transform .18s ease;
}

.ltk-meta{
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  color: #6b7280;
  margin: 4px 0 6px;
  flex-wrap: wrap;
}

.ltk-qtybar button{
  position: relative;
}

.ltk-qtybar button::after{
  content: "Agregar";
  font-weight: 800;
}

.ltk-qtybar button i{
  margin-left: 6px;
}

@media (hover:hover){
  .ltk-qtybar button:hover::after{
    content: "Agregar al carro";
  }
}

.ltk-card--added{
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15), 0 12px 28px rgba(37,99,235,.18);
}

@media (hover:hover){
  .ltk-meta{
    opacity: 0;
    max-height: 0;
    transition: all .18s ease;
  }

  .ltk-card:hover .ltk-meta{
    opacity: 1;
    max-height: 40px;
  }
}

/* Desktop hover: ocultar LudoPesos (y meta) y mostrar en hover */
@media (hover:hover){
  .ltk-points{
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: all .18s ease;
  }

  .ltk-card:hover .ltk-points{
    opacity: 1;
    max-height: 40px;
    margin-top: 6px;
  }
}

.ltk-points{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   Toolbar categoría: Ocultar agotados + Ordenar por (v4)
   ========================================================= */

.store-page .ltk-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 18px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

/* responsive: en mobile apila */
@media (max-width: 575.98px){
  .store-page .ltk-toolbar{
    flex-direction: column;
    align-items: stretch;
  }
}

/* Toggle moderno */
.store-page .ltk-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  cursor:pointer;
  user-select:none;
}

.store-page .ltk-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.store-page .ltk-toggle-ui{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .10);
  border: 1px solid rgba(15, 23, 42, .10);
  display:flex;
  align-items:center;
  padding: 2px;
  transition: background .18s ease, border-color .18s ease;
}

.store-page .ltk-toggle-dot{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background:#fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transform: translateX(0);
  transition: transform .18s ease;
}

.store-page .ltk-toggle-text{
  font-weight: 700;
  color: #0f172a;
}

/* estado ON */
.store-page .ltk-toggle input:checked + .ltk-toggle-ui{
  background: rgba(37, 99, 235, .18);
  border-color: rgba(37, 99, 235, .25);
}
.store-page .ltk-toggle input:checked + .ltk-toggle-ui .ltk-toggle-dot{
  transform: translateX(18px);
}

/* bloque ordenar */
.store-page .ltk-sort{
  display:flex;
  align-items:center;
  gap:10px;
}

.store-page .ltk-sort-label{
  color: #64748b;
  font-weight: 600;
}

/* select v4 */
.store-page .ltk-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 36px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
  font-weight: 700;
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  outline: none;
  min-width: 190px;
}

/* flecha del select (pseudo icon) */
.store-page .ltk-sort{
  position: relative;
}
.store-page .ltk-sort::after{
  content:"▾";
  position:absolute;
  right: 12px;
  pointer-events:none;
  color:#64748b;
  font-size: 14px;
}

/* focus accesible */
.store-page .ltk-select:focus{
  border-color: rgba(37, 99, 235, .45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14), 0 10px 22px rgba(0,0,0,.06);
}

/* =========================================================
   Banner Envío Gratis (v4)
   ========================================================= */

.store-page .ltk-shipping-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;

  margin: 16px auto 18px;
  padding: 12px 16px;
  max-width: 860px;

  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.store-page .ltk-shipping-icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(37, 99, 235, .10); /* azul suave acorde a botones */
  border: 1px solid rgba(37, 99, 235, .18);
  font-size: 18px;
}

.store-page .ltk-shipping-text{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: 8px;
  flex-wrap: wrap;

  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
}

.store-page .ltk-shipping-text strong{
  font-weight: 900;
}

.store-page .ltk-shipping-amount{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;

  background: rgba(239, 68, 68, .10); /* rojo suave (coherente con oferta) */
  border: 1px solid rgba(239, 68, 68, .18);
  color: #b91c1c;
}

/* Mobile: apilar bien */
@media (max-width: 575.98px){
  .store-page .ltk-shipping-banner{
    margin: 12px 0 14px;
    max-width: 100%;
    justify-content:flex-start;
  }
  .store-page .ltk-shipping-text{
    justify-content:flex-start;
  }
}


/* =========================================================
   Título de categoría (estilo v4)
   ========================================================= */
.store-page .ltk-category-title{
  margin: 8px 0 18px !important;
  text-align: center;

  /* jerarquía */
  font-size: 32px;
  line-height: 1.1;
  font-weight: 900;

  /* look moderno */
  letter-spacing: -0.02em;
  color: #0f172a;

  /* suaviza “slug” visualmente */
  text-transform: none;
  font-variant-ligatures: none;
}

/* subrayado/acento sutil (coherente con tu UI azul) */
.store-page .ltk-category-title::after{
  content:"";
  display:block;
  width: 54px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: rgba(37, 99, 235, .75);
}

/* responsive */
@media (max-width: 575.98px){
  .store-page .ltk-category-title{
    font-size: 26px;
    margin: 6px 0 14px !important;
  }
}


/* =========================================================
   Título de categoría (solo presentación)
   ========================================================= */

.ltk-category-title {
  margin: 16px 0 28px !important;
  text-align: center;

  /* jerarquía clara */
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;

  /* look moderno */
  letter-spacing: -0.02em;
  color: #0f172a;

  /* limpia herencia bootstrap */
  font-family: inherit;
}

/* acento visual sutil (muy importante) */
.ltk-category-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;

  /* azul Ludoteka / UI */
  background: linear-gradient(
    90deg,
    #2563eb,
    #3b82f6
  );
}

/* responsive */
@media (max-width: 575.98px) {
  .ltk-category-title {
    font-size: 26px;
    margin: 12px 0 20px !important;
  }

  .ltk-category-title::after {
    width: 44px;
    height: 3px;
    margin-top: 10px;
  }
}

/* =========================================================
   Título de categoría (refinado)
   ========================================================= */

/* TÍTULO DE CATEGORÍA: más pro, menos negro */
.ltk-category-title{
  text-align:center;

  /* “Display” moderno sin depender de Google Fonts */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  font-size: 34px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.03em;

  /* en vez de negro: tono brand / slate */
  color: #0b2a6f; /* azul profundo, se siente Ludoteka */
  margin: 6px 0 6px !important; /* importante: apretar abajo */
}

/* acento más fino y cercano al texto */
.ltk-category-title::after{
  content:"";
  display:block;
  width: 44px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}


/* mobile */
@media (max-width: 575.98px) {
  .ltk-category-title {
    font-size: 24px;
    margin: 8px 0 14px !important;
  }

  .ltk-category-title::after {
    width: 36px;
    height: 3px;
    margin-top: 8px;
  }
}

/* APRETAR ESPACIO ENTRE TÍTULO Y BANNER */
.ltk-category-title{
  margin-bottom: 4px !important;
}

/* si hay un contenedor envolviendo al título con padding, esto lo corrige */
.ltk-category-title{
  padding-bottom: 0 !important;
}

/* reduce el aire global arriba del banner */
.ltk-shipping-banner{
  margin-top: 10px !important;
}

.osahan-title{ padding: 18px 0 10px !important; }

/* HERO del título: reduce el “vacío” de la franja */
.ltk-category-hero{
  padding: 18px 0 10px;
  margin: 0;
}

@media (max-width: 575.98px){
  .ltk-category-title{
    font-size: 26px;
    margin: 4px 0 4px !important;
  }
  .ltk-category-title::after{
    width: 34px;
    margin-top: 6px;
  }
  .ltk-category-hero{
    padding: 12px 0 8px;
  }
}

/* =========================================================
   TÍTULO DE CATEGORÍA (definitivo) — fuera de .store-page
   ========================================================= */

/* Reduce el “vacío” del hero (la franja) */
.ltk-category-hero{
  padding: 12px 0 8px !important;
  margin: 0 !important;
}

/* Título: más moderno, más “display”, menos negro */
.ltk-category-hero .ltk-category-title{
  margin: 0 !important;               /* clave: mata el espacio abajo */
  text-align: center;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 36px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.04em;

  color: #0b2a6f;                      /* azul profundo (más brand que negro) */
}

/* Subrayado/acento más fino y más cerca */
.ltk-category-hero .ltk-category-title::after{
  content:"";
  display:block;
  width: 44px;
  height: 3px;
  margin: 6px auto 0;                 /* más pegado al texto */
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

/* Apurar el bloque siguiente (banner) */
.ltk-shipping-banner{
  margin-top: 10px !important;
}

/* Mobile */
@media (max-width: 575.98px){
  .ltk-category-hero{ padding: 10px 0 6px !important; }
  .ltk-category-hero .ltk-category-title{ font-size: 26px; }
  .ltk-category-hero .ltk-category-title::after{ width: 34px; margin-top: 6px; }
}


/* =========================================================
   HERO DE CATEGORÍA — look “marca Ludoteka”
   ========================================================= */

.ltk-category-hero{
  display: flex;
  justify-content: center;
  padding: 14px 12px 8px;
  margin: 0;
  background: radial-gradient(1200px 220px at 50% 0%, rgba(37,99,235,.10), transparent 60%);
}

.ltk-category-hero__inner{
  position: relative;
  width: min(980px, 100%);
  padding: 18px 18px 14px;
  border-radius: 18px;

  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  backdrop-filter: blur(6px);

  text-align: center;
}

/* Título */
.ltk-category-title{
  margin: 0 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 950 !important;
  letter-spacing: -0.045em;

  /* azul “marca”, menos negro */
  color: #0b2a6f !important;
}

/* Subrayado brand con gradiente */
.ltk-category-title::after{
  content:"";
  display:block;
  width: 56px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa, #22c55e);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .18);
}

/* “Spark” sutil (confetti/meeple vibe) */
.ltk-category-hero__spark{
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  opacity: .55;
  filter: blur(.2px);
}

.ltk-category-hero__spark--a{
  top: 14px;
  left: 18px;
  background: linear-gradient(135deg, #ff4d4d, #ffb020);
  transform: rotate(10deg);
}

.ltk-category-hero__spark--b{
  top: 18px;
  right: 22px;
  background: linear-gradient(135deg, #22c55e, #60a5fa);
  transform: rotate(-12deg);
}

/* Mobile */
@media (max-width: 575.98px){
  .ltk-category-hero{
    padding: 10px 10px 6px;
  }

  .ltk-category-hero__inner{
    padding: 14px 14px 12px;
    border-radius: 16px;
  }

  .ltk-category-title{
    font-size: 28px;
    letter-spacing: -0.035em;
  }

  .ltk-category-title::after{
    width: 44px;
    height: 4px;
    margin-top: 7px;
  }
}



@media (max-width: 768px) {
  .ltk-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}


/* =========================================================
   CATEGORÍA — Unificar “top cards” (HERO + Banner + Toolbar)
   ========================================================= */

/* 1) HERO: dentro del container, sin ancho propio raro */
.store-page .ltk-category-hero{
  margin: 10px 0 14px;
  padding: 0;                 /* el padding lo maneja el inner */
  background: none;           /* ya estás dentro del layout */
}

.store-page .ltk-category-hero__inner{
  width: 100%;
  border-radius: 18px;
  padding: 18px 18px 14px;

  /* Diferencia visual vs banner/toolbar: leve tinte */
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(255,255,255,.92));
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

/* 2) Banner: mismo ancho, look “pill card”, no idéntico al hero */
.store-page .ltk-shipping-banner{
  width: 100%;
  max-width: none;            /* clave: no limitarlo distinto al container */
  margin: 0 0 14px;
  border-radius: 18px;

  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

/* 3) Toolbar: mismo ancho, más “control panel” */
.store-page .ltk-toolbar{
  width: 100%;
  border-radius: 18px;

  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);

  margin: 0 0 18px;           /* separa de las cards */
}

/* 4) Mobile: compactar un poco */
@media (max-width: 575.98px){
  .store-page .ltk-category-hero__inner{ padding: 14px 14px 12px; }
  .store-page .ltk-shipping-banner{ margin-bottom: 12px; }
  .store-page .ltk-toolbar{ margin-bottom: 14px; }
}

/* =========================================================
   Banner Envío Gratis — modo NOTICE (menos protagonista)
   Pegar al FINAL de ludoteka-categoria-v4.css
   ========================================================= */

.store-page .ltk-shipping-banner.ltk-shipping-banner--notice{
  /* menos “card grande” */
  padding: 10px 14px;
  border-radius: 14px;

  /* se siente aviso, no bloque principal */
  background: rgba(37, 99, 235, .06);
  border: 1px dashed rgba(37, 99, 235, .22);
  box-shadow: none;

  /* compacto */
  margin: 8px 0 12px;

  /* alinear a la izquierda (mensaje) */
  justify-content: flex-start;
}

/* ícono más discreto */
.store-page .ltk-shipping-banner--notice .ltk-shipping-icon{
  width: 34px;
  height: 34px;
  font-size: 16px;
  background: rgba(37, 99, 235, .10);
  border: 1px solid rgba(37, 99, 235, .18);
}

/* texto tipo “barra informativa” */
.store-page .ltk-shipping-banner--notice .ltk-shipping-text{
  justify-content: flex-start;
  font-size: 13.5px;
  gap: 8px;
}

/* kicker pequeño “Beneficio” */
.store-page .ltk-shipping-banner--notice .ltk-shipping-kicker{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  color: #0b2a6f;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(15, 23, 42, .08);
}

/* separador puntito */
.store-page .ltk-shipping-banner--notice .ltk-shipping-sep{
  color: rgba(15, 23, 42, .35);
  font-weight: 800;
}

/* monto: sigue destacando, pero sin gritar */
.store-page .ltk-shipping-banner--notice .ltk-shipping-amount{
  padding: 4px 10px;
  font-size: 12.5px;
  background: rgba(239, 68, 68, .10);
  border: 1px solid rgba(239, 68, 68, .20);
}

/* mobile: que no se “parta” feo */
@media (max-width: 575.98px){
  .store-page .ltk-shipping-banner.ltk-shipping-banner--notice{
    margin: 8px 0 10px;
  }
}

/* ================================
   FILTROS LATERALES – ESTILO LUDOTEKA
   ================================ */

.store-page .filters{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  padding: 18px 18px 16px !important;
  background: #fff;
}

/* Header "Filtrar por" */
.store-page .filters-header{
  padding-bottom: 10px !important;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.store-page .filters-header h6{
  font-size: 15px;
  font-weight: 800;
  color: #0b2a6f; /* azul Ludoteka */
  letter-spacing: -0.01em;
}

/* Headers de cada grupo (TIPO DE JUEGO, CANTIDAD, etc.) */
.store-page .filters-card-header a{
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #0f172a;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.store-page .filters-card-header a:hover{
  text-decoration: none;
  color: #2563eb;
}

/* Flecha collapse */
.store-page .filters-card-header i{
  transition: transform .2s ease;
}

.store-page .filters-card-header a[aria-expanded="true"] i{
  transform: rotate(180deg);
}

/* Lista de checkboxes */
.store-page .card-shop-filters .custom-control{
  margin-bottom: 8px;
}

.store-page .custom-control-label{
  font-size: 13.5px;
  color: #334155;
  cursor: pointer;
}

/* Checkbox activo */
.store-page .custom-control-input:checked ~ .custom-control-label{
  font-weight: 700;
  color: #0b2a6f;
}

/* Sticky solo desktop */
@media (min-width: 992px){
  .store-page .filters{
    position: sticky;
    top: 110px;
  }
}

/* ================================
   HERO CATEGORÍA – DADOS (PIPS REALES)
   ================================ */

.ltk-category-hero{
  position: relative;
  overflow: hidden;
}

/* Base: ambos dados */
.ltk-category-hero::before,
.ltk-category-hero::after{
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 7px;                 /* look dado */
  box-shadow: 0 10px 22px rgba(10, 25, 60, .10);
  opacity: .95;
}

/* DADO IZQUIERDO (NARANJA) – cara 1 */
/* =========================================================
   DADOS EN ESQUINAS (SIN WARNINGS): usa SVG inline
   Reemplaza tus ::before y ::after actuales por esto.
   ========================================================= */

/* Asegura contexto */
.store-page .ltk-category-hero{
  position: relative;
  overflow: hidden;
}

/* Base común de ambos dados */
.store-page .ltk-category-hero::before,
.store-page .ltk-category-hero::after{
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .18));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* DADO IZQUIERDO (NARANJO) – cara 2 */
.store-page .ltk-category-hero::before{
  top: 16px;
  left: 18px;
  transform: rotate(-12deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb703'/%3E%3Cstop offset='1' stop-color='%23fb8500'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Crect x='1' y='1' width='32' height='32' rx='9' fill='none' stroke='%23ffffff' stroke-opacity='.55'/%3E%3Ccircle cx='11' cy='11' r='2.2' fill='%23ffffff' fill-opacity='.95'/%3E%3Ccircle cx='23' cy='23' r='2.2' fill='%23ffffff' fill-opacity='.95'/%3E%3C/svg%3E");
}

/* DADO DERECHO (VERDE) – cara 4 */
.store-page .ltk-category-hero::after{
  top: 16px;
  right: 18px;
  transform: rotate(10deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237dd3a5'/%3E%3Cstop offset='1' stop-color='%2334d399'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Crect x='1' y='1' width='32' height='32' rx='9' fill='none' stroke='%23ffffff' stroke-opacity='.55'/%3E%3Ccircle cx='11' cy='11' r='2.2' fill='%23ffffff' fill-opacity='.95'/%3E%3Ccircle cx='23' cy='11' r='2.2' fill='%23ffffff' fill-opacity='.95'/%3E%3Ccircle cx='11' cy='23' r='2.2' fill='%23ffffff' fill-opacity='.95'/%3E%3Ccircle cx='23' cy='23' r='2.2' fill='%23ffffff' fill-opacity='.95'/%3E%3C/svg%3E");
}

/* =========================================================
   FIX: DADOS (hacer que ::before NO quede detrás del inner)
   Pegar al FINAL
   ========================================================= */

.store-page .ltk-category-hero{
  position: relative; /* asegura contexto */
}

/* el contenido (card del título) queda debajo de los dados */
.store-page .ltk-category-hero__inner{
  position: relative;
  z-index: 1;
}

/* ambos dados por encima del contenido */
.store-page .ltk-category-hero::before,
.store-page .ltk-category-hero::after{
  z-index: 2;
}

/* ===========================
   DADOS HERO — animación sutil
   =========================== */

/* Asegura que los pseudo-elementos puedan animarse */
.ltk-category-hero::before,
.ltk-category-hero::after{
  will-change: transform, filter;
  transform-origin: center;
  transition: transform .22s ease, filter .22s ease;
}

/* Animación base (muy sutil) */
@media (prefers-reduced-motion: no-preference){
  .ltk-category-hero::before{
    animation: ltk-die-float-left 5.8s ease-in-out infinite;
  }
  .ltk-category-hero::after{
    animation: ltk-die-float-right 6.6s ease-in-out infinite;
  }
}

@keyframes ltk-die-float-left{
  0%, 100% { transform: rotate(-12deg) translateY(0); filter: drop-shadow(0 10px 18px rgba(0,0,0,.10)); }
  50%      { transform: rotate(-10deg) translateY(-2px); filter: drop-shadow(0 14px 22px rgba(0,0,0,.12)); }
}

@keyframes ltk-die-float-right{
  0%, 100% { transform: rotate(10deg) translateY(0); filter: drop-shadow(0 10px 18px rgba(0,0,0,.10)); }
  50%      { transform: rotate(12deg) translateY(-2px); filter: drop-shadow(0 14px 22px rgba(0,0,0,.12)); }
}

/* Hover: reacción un poco más notoria (solo desktop) */
@media (hover: hover) and (pointer: fine){
  .ltk-category-hero:hover::before{
    transform: rotate(-14deg) translateY(-5px) scale(1.02);
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.14));
  }
  .ltk-category-hero:hover::after{
    transform: rotate(14deg) translateY(-5px) scale(1.02);
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.14));
  }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .ltk-category-hero::before,
  .ltk-category-hero::after{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================
   ANIMACIÓN SIMPLE DADOS (HERO CATEGORÍA)
   Requiere que tus dados sean ::before y ::after
   en .ltk-category-hero (como los tienes ahora).
   ========================================= */

/* DADO IZQUIERDO (naranjo) */
.ltk-category-hero::before{
  /* Ajusta estos valores si tu dado ya usa otra rotación */
  animation: ltkDiceFloatLeft 5.8s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* DADO DERECHO (verde) */
.ltk-category-hero::after{
  /* Ajusta estos valores si tu dado ya usa otra rotación */
  animation: ltkDiceFloatRight 6.6s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Flotación + micro-rotación (suave) */
@keyframes ltkDiceFloatLeft{
  0%,100% { transform: rotate(-12deg) translateY(0); }
  50%     { transform: rotate(-10deg) translateY(-7px); }
}

@keyframes ltkDiceFloatRight{
  0%,100% { transform: rotate(12deg) translateY(0); }
  50%     { transform: rotate(10deg) translateY(-6px); }
}

/* Respeta accesibilidad / usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .ltk-category-hero::before,
  .ltk-category-hero::after{
    animation: none !important;
  }
}

/* Aviso 3D dentro del hero */
.ltk-hero-note{
  margin: 14px auto 0;
  max-width: 980px;           /* controla el ancho para que se lea bien */
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;

  /* look tipo "beneficio" pero más liviano que un card */
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(30, 58, 138, .14);
  box-shadow: 0 10px 26px rgba(16, 24, 40, .06);

  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ltk-hero-note__badge{
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #1f3b8a;
  background: rgba(31, 59, 138, .10);
  border: 1px solid rgba(31, 59, 138, .16);
}

.ltk-hero-note__text{
  color: #2b3a55;
  font-size: 15px;
  line-height: 1.35;
}

.ltk-hero-note__link{
  font-weight: 800;
  color: #1f3b8a;
  text-decoration: none;
  white-space: nowrap;
}

.ltk-hero-note__link:hover{
  text-decoration: underline;
}

/* Responsive: que no se vea apretado */
@media (max-width: 768px){
  .ltk-hero-note{
    margin-top: 10px;
    padding: 12px 14px;
  }
  .ltk-hero-note__text{
    font-size: 14px;
  }
}

/* Badge garantía: pequeño arriba-izquierda */
.store-page .ltk-card-thumb{
  position: relative; /* por si en algún template no viene */
  overflow: hidden;   /* respeta bordes redondeados */
}

.store-page .ltk-card-thumb .badge-garantia{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80px;          /* tamaño recomendado */
  height: auto;
  z-index: 6;
  pointer-events: none;
  transform: none !important;
}


@media (max-width: 575.98px){
  .store-page .ltk-card-thumb .badge-garantia{
    width: 56px;
  }
}

/* ===== Usados: precio + tag en una misma línea ===== */
.store-page .ltk-price-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap; /* si queda justo en móvil, baja el tag sin romper */
}

.store-page .ltk-price-row .ltk-used-tag{
  margin-top: 0;         /* anula el margin-top:10px original */
  padding: 5px 10px;     /* un poco más compacto */
  border-radius: 999px;  /* pill */
  font-size: 11px;       /* más fino */
  line-height: 1;
  white-space: nowrap;
}

/* =========================================
   Usados: Tag "JUEGO USADO" fuera del precio
   (bajo el título, más informativo)
   ========================================= */

.store-page .ltk-used-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;

  /* más "label" que "botón" */
  background: rgba(15, 23, 42, .06);
  border: 1px solid rgba(15, 23, 42, .10);
  color: #0f172a;
}

/* Ubicación bajo título */
.store-page .ltk-used-tag--under-title{
  margin: 6px 0 10px;
}

/* ===============================
   MODAL: Producto agregado al carro
   =============================== */

#agregar_carro_compras .modal-content{
  border-radius: 18px;
  overflow: hidden;
}

#agregar_carro_compras .modal-header{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

#agregar_carro_compras .modal-title{
  font-weight: 800;
  letter-spacing: .2px;
}

#agregar_carro_compras .modal-body{
  padding: 18px 22px;
}

#agregar_carro_compras .modal-footer{
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 14px 22px;
}

/* Caja éxito */
#agregar_carro_compras .ltk-cart-success{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ecfdf5;
  border: 1px solid #86efac;
}

#agregar_carro_compras .ltk-cart-success__icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: #16a34a;
  color: #fff;
  flex: 0 0 28px;
  margin-top: 1px;
}

#agregar_carro_compras .ltk-cart-success__title{
  font-weight: 900;
  color: #14532d;
  line-height: 1.1;
}

#agregar_carro_compras .ltk-cart-success__sub{
  color: #166534;
  opacity: .9;
  margin-top: 2px;
}

/* Botones estilo “pill” */
#agregar_carro_compras .ltk-btn-pill{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
}

#agregar_carro_compras .btn-outline-secondary{
  background: #fff;
}

/* Fix hover botón "Seguir comprando" */
#agregar_carro_compras .btn-outline-secondary:hover,
#agregar_carro_compras .btn-outline-secondary:focus{
  background-color: #e5e7eb;   /* gris suave */
  color: #111827;              /* texto oscuro */
  border-color: #9ca3af;
}

background-color: #f3f4f6;