/* =====================================================
   RINKO – Hoja de estilos optimizada v4.6.11 + Extras
   -----------------------------------------------------
   • Incluye buscador móvil, botón WhatsApp y loop táctil
   • Sin repeticiones – ordenado por función
   ===================================================== */

/* ---------- VARIABLES ---------- */
:root{
  --rinko-card-bg:#fff;
  --rinko-card-radius:1rem;
  --rinko-card-shadow:0 0.25rem 0.75rem rgba(0,0,0,.06);
  --rinko-card-shadow-hover:0 0.5rem 1rem rgba(0,0,0,.12);
  --rinko-gap:0.3rem;
  --rinko-transition:.18s cubic-bezier(.4,0,.2,1);
  --rinko-accent:#cc4b1f;
  --rinko-accent-dark:#a83b19;
  --rinko-font-xs:clamp(.72rem,.74rem + .1vw,.8rem);
  --rinko-font-sm:clamp(.82rem,.84rem + .15vw,.9rem);
  --rinko-img-height: 15rem;
}

/* ---------- BASE ---------- */
html{scroll-behavior:smooth;font-size:16px}
body{
  margin:0;background:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* =====================================================
   BUSCADOR COMPACTO EN MÓVIL
   ===================================================== */
@media (max-width: 768px) {
  .dgwt-wcas-search-wrapp {
    padding: 2px 6px !important;
    height: auto !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 0 !important;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  }

  .dgwt-wcas-search-input {
    height: 28px !important;
    font-size: 13px !important;
    padding: 2px 8px !important;
  }

  .dgwt-wcas-ico-magnifier,
  .dgwt-wcas-search-icon,
  .dgwt-wcas-search-submit {
    display: none !important;
  }

  .dgwt-wcas-search,
  .dgwt-wcas-search-form {
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 0 !important;
  }

  .elementor-sticky--effects .dgwt-wcas-search-wrapp {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0 !important;
    overflow: hidden;
    pointer-events: none;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* =====================================================
   LOOP GRID HORIZONTAL TÁCTIL
   ===================================================== */
.elementor-loop-container.elementor-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.625rem 0;
  margin: 0;
  box-sizing: border-box;
  height: auto !important;
  min-height: auto !important;
  position: relative;
  gap: var(--rinko-gap);
  align-items: stretch;
}
.elementor-loop-container.elementor-grid::-webkit-scrollbar {
  display: none;
}
.columna-rinko {
  display: flex;
  flex-direction: column;
  gap: var(--rinko-gap);
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: start;
}

/* =====================================================
   TARJETAS RINKO – ESTRUCTURA COMPLETA
   ===================================================== */
.columna-rinko .e-loop-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 17rem;
  max-width: 100%;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta-rinko {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: 1rem;
  background: var(--rinko-card-bg);
  border-radius: var(--rinko-card-radius);
  box-shadow: var(--rinko-card-shadow);
  overflow: hidden;
  text-align: center;
  height: 100%;
  opacity: 0;
  transform: translateY(.625rem);
  transition: opacity .4s ease, transform .4s ease;
}
.tarjeta-rinko.visible {
  opacity: 1;
  transform: translateY(0);
}
.tarjeta-rinko:hover,
.tarjeta-rinko:focus-within {
  transform: translateY(-.125rem);
  box-shadow: var(--rinko-card-shadow-hover);
}

/* ---------- IMAGEN DENTRO DE LA TARJETA ---------- */
.tarjeta-rinko .elementor-widget-image {
  width: 100%;
  height: var(--rinko-img-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  box-sizing: content-box;
  flex-shrink: 0;
  overflow: hidden;
}
.tarjeta-rinko .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- CONTENIDO RESTANTE ---------- */
.contenido-tarjeta {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Estilo base para todos los títulos */
.tarjeta-rinko h3,
.tarjeta-rinko .elementor-heading-title {
  margin: 0;
  font-size: .75rem;
}

/* Solo aplica min-height si tiene la clase personalizada */
.tarjeta-rinko h3.titulo-lineas,
.tarjeta-rinko .elementor-heading-title.titulo-lineas {
  min-height: 3.75rem;
}

/* Evitar que los SKUs se partan en el guion */
.titulo-lineas {
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

a.button.add_to_cart_button,
a.button.ajax_add_to_cart {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: #fff !important;
}

a.button.add_to_cart_button:hover,
a.button.ajax_add_to_cart:hover {
  background-color: #218838 !important;
  border-color: #218838 !important;
  color: #fff !important;
}

.titulo-lineas span {
  line-height: 1.2 !important;
  margin-bottom: 0.2rem !important;
  display: block !important;
  font-weight: 600 !important;
}

.titulo-lineas small {
  font-size: 0.85em !important;
  color: #666 !important;
  line-height: 1.2 !important;
}

.woocommerce-Price-amount.amount {
  font-size: 1.2rem; /* Cambiá este valor según lo que necesites */
  font-weight: bold; /* Opcional: hacelo más visible */
}

.cartt .woocommerce-Price-amount.amount {
  font-size: 1rem !important;
  font-weight: bold !important;
}


.woot-widget-bubble.woot-elements--left {
  left: 4.5rem !important;
  bottom: 1rem !important;
}




/* ====== RINKO – Control fino de padding/gaps ====== */
:root{
  /* nuevos tokens de espacio */
  --rinko-card-px: .6rem !important;       /* padding X de la tarjeta */
  --rinko-card-py: .6rem !important;       /* padding Y de la tarjeta */
  --rinko-card-gap: .3rem !important;      /* espacio entre bloques internos */
  --rinko-img-pad: .2rem !important;       /* padding del contenedor de imagen */
}

/* usar variables en la tarjeta */
.tarjeta-rinko{
  gap: var(--rinko-card-gap) !important;
  padding: var(--rinko-card-py) var(--rinko-card-px) !important;
}

/* compactar imagen */
.tarjeta-rinko .elementor-widget-image{
  padding: var(--rinko-img-pad) !important;
  box-sizing: border-box !important;
}

/* eliminar márgenes “ocultos” de widgets internos de Elementor */
.tarjeta-rinko [class*="elementor-widget"]{
  margin: 0 !important;
}
.tarjeta-rinko .elementor-widget-text-editor p{ margin: 0 !important; }

/* título en dos líneas: altura justa y menos aire entre nombre/detalle */
.titulo-lineas{ margin: 0 !important; }
.titulo-lineas span{ margin-bottom: .1rem !important; }
.tarjeta-rinko h3.titulo-lineas,
.tarjeta-rinko .elementor-heading-title.titulo-lineas{
  min-height: 3rem !important; /* más bajo que 3.25rem */
}

/* precio pegado al bloque anterior */
.woocommerce-Price-amount.amount{
  margin-top: .1rem !important;
}

/* botón al fondo con padding contenido */
.tarjeta-rinko .elementor-button,
.tarjeta-rinko a.elementor-button{
  margin-top: auto !important;
  padding: .45rem .7rem !important;
}

/* ====== Mobile: aún más compacto ====== */
@media (max-width: 48rem){
  :root{
    --rinko-card-px: .4rem !important;
    --rinko-card-py: .4rem !important;
    --rinko-card-gap: .25rem !important;
    --rinko-img-pad: .1rem !important;
  }
  .tarjeta-rinko h3,
  .tarjeta-rinko .elementor-heading-title{ font-size: .75rem !important; }
  .tarjeta-rinko h3.titulo-lineas,
  .tarjeta-rinko .elementor-heading-title.titulo-lineas{
    min-height: 2.5rem !important;
  }
}






/* =====================================================
   MOBILE (<768px ˜ 48rem)
   ===================================================== */
@media (max-width: 48rem) {
  :root { --rinko-img-height: 7rem; }

  .columna-rinko .e-loop-item { width: 10rem; }

  .tarjeta-rinko {
    padding: .35rem;
    transition: opacity .18s ease, transform .18s ease;
  }

  .woocommerce-Price-amount.amount {
    font-size: 0.9rem;
    font-weight: bold;
  }


  .tarjeta-rinko h3,
  .tarjeta-rinko .elementor-heading-title { font-size: .8rem; }

  .tarjeta-rinko .elementor-widget-image {
    padding: .2rem;
  }
}