/* =========================================================
   TF Sidebar Suite v15.3 — Responsive hardening (tablet)
   Scope: .tf-sb (sin inline CSS)
========================================================= */

.tf-sb,
.tf-sb *{
  box-sizing: border-box;
}

.tf-sb{
  max-width: 100%;
  overflow: hidden; /* evita que algo “asome” por fuera */
}

.tf-sb__card{
  max-width: 100%;
}

/* Item: thumb + contenido, sin forzar anchos raros */
.tf-sb__item{
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}

.tf-sb__thumb{
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
}

.tf-sb__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Lo más importante: permitir que el texto/acciones “encojan” */
.tf-sb__body{
  min-width: 0;
}

.tf-sb__h4,
.tf-sb__benefit,
.tf-sb__intro{
  overflow-wrap: anywhere;
}

/* CTAs: por defecto en fila si cabe */
.tf-sb__actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap; /* clave */
  min-width: 0;
}

/* Los botones no deben “empujar” el layout */
.tf-sb__btn{
  min-width: 0;
  max-width: 100%;
  white-space: normal;     /* permite 2 líneas si hace falta */
  text-align: center;
}

/* Breakpoint tablet: apila CTAs y ocupa todo el ancho */
@media (max-width: 1024px){
  .tf-sb__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .tf-sb__actions .tf-sb__btn{
    width: 100%;
  }
}

/* Teléfono: reduce grid si tu sidebar se estrecha mucho */
@media (max-width: 640px){
  .tf-sb__item{
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .tf-sb__thumb{
    width: 64px;
    height: 64px;
  }
}
/* =========================================================
   FIX CTA recortado en pantallas estrechas (sidebar)
   ========================================================= */

/* 1) Asegura que el widget NUNCA empuje el ancho del sidebar */
.tf-sb,
.tf-sb__card,
.tf-sb__footer{
  max-width: 100%;
}

/* 2) Botones: siempre dentro del contenedor */
.tf-sb__btn{
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* 3) El CTA del footer es el que más suele cortar: hazlo block + width 100% */
.tf-sb__footer .tf-sb__btn{
  display: block;
  width: 100%;
}

/* 4) En pantallas pequeñas: reduce padding/tamaño de letra del botón (evita recorte) */
@media (max-width: 420px){
  .tf-sb__btn{
    padding-left: .85rem;
    padding-right: .85rem;
    font-size: .95rem;
  }
}

/* 5) Blindaje extra si el layout del theme es grid/flex y el sidebar no encoge */
.widget-area, .sidebar, .site-sidebar, .primary-sidebar{
  min-width: 0;
}
/* =========================================================
   TF Sidebar Suite — Layout vertical centrado (ALL screens)
   Objetivo: imagen arriba > título > texto > CTA (sin recortes)
   ========================================================= */

/* Contenedor del item: SIEMPRE en columna y centrado */
.tf-sb__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .55rem;
  max-width: 100%;
}

/* La miniatura arriba y centrada */
.tf-sb__thumb,
.tf-sb__thumb--link{
  display: block;
  width: 100%;
  max-width: 180px;      /* ajusta si quieres más/menos */
  margin: 0 auto;
}

/* Imagen: nunca se sale */
.tf-sb__thumb img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Cuerpo: ocupa todo el ancho disponible, sin empujar el sidebar */
.tf-sb__body{
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Títulos y textos: sin “empujar” */
.tf-sb__h4,
.tf-sb__benefit,
.tf-sb__intro{
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* CTA(s): siempre debajo y a ancho completo */
.tf-sb__actions{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  width: 100%;
  max-width: 340px;      /* evita CTAs demasiado anchos en sidebars grandes */
  margin: 0 auto;
}

/* Botones: nunca se recortan */
.tf-sb__btn{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
}

/* Footer CTA (Ver guía de accesorios): mismo comportamiento */
.tf-sb__footer .tf-sb__btn{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Blindaje anti-overflow del propio widget */
.tf-sb,
.tf-sb__card{
  max-width: 100%;
  overflow: hidden;
}