/* Tomomi Affiliate — card frontend
   Container queries para responsive real (no por viewport sino por contenedor padre).
   Soporte ~94% navegadores modernos; fallback con flex-wrap para los demás. */

.amzcard{
  container-type:inline-size;
  container-name:amzcard;
  display:flex !important;
  flex-wrap:wrap;
  gap:0.9rem;
  align-items:flex-start;
  border:1px solid #e5e7eb !important;
  border-radius:10px !important;
  padding:0.9rem !important;
  margin:1.5rem 0 !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  max-width:640px;
  font-family:inherit;
  line-height:1.4;
  box-sizing:border-box;
}

.amzcard *{box-sizing:border-box;min-width:0}

.amzcard__image{
  flex:0 0 clamp(96px, 28cqi, 130px) !important;
  width:clamp(96px, 28cqi, 130px);
  aspect-ratio:1/1;
  height:auto;
  display:flex !important;
  align-items:center;
  justify-content:center;
  background:#f9fafb;
  border-radius:6px;
  overflow:hidden;
  text-decoration:none !important;
  border:none !important;
}
.amzcard__image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block;
  border:none !important;
  box-shadow:none !important;
}
.amzcard__placeholder{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:clamp(1.8rem, 8cqi, 2.5rem);
  line-height:1;
  color:#cbd5e1;
}

.amzcard__body{
  flex:1 1 160px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0.4rem;
  min-width:0;
}
.amzcard__title{
  margin:0 !important;
  font-size:0.95rem !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:#111827 !important;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.amzcard__title a{
  color:#111827 !important;
  text-decoration:none !important;
  border:none !important;
}
.amzcard__title a:hover{text-decoration:underline !important}

.amzcard__price{
  margin:0 !important;
  color:#6b7280 !important;
  font-size:0.9rem !important;
  font-weight:500;
}

.amzcard__cta{
  margin:auto 0 0 0 !important;
  padding-top:0.4rem;
}
.amzcard__btn{
  display:inline-block !important;
  background:#fb923c !important;
  color:#fff !important;
  padding:0.5rem 0.9rem !important;
  border-radius:6px !important;
  text-decoration:none !important;
  font-weight:600 !important;
  font-size:0.9rem !important;
  border:none !important;
  line-height:1 !important;
  white-space:nowrap;
  transition:background .15s;
}
.amzcard__btn:hover,
.amzcard__btn:focus{
  background:#ea580c !important;
  color:#fff !important;
  text-decoration:none !important;
}

/* === Container query: contenedor estrecho (<340px) → stack vertical ===
   Por encima la imagen fluye con clamp+cqi, así que sólo apilamos cuando
   el lado a lado deja de tener sentido. */
@container amzcard (max-width: 340px){
  .amzcard{
    flex-direction:column !important;
    gap:0.7rem;
  }
  .amzcard__image{
    flex:0 0 auto !important;
    width:100% !important;
    aspect-ratio:auto;
    height:auto !important;
    max-height:200px;
  }
  .amzcard__image img,
  .amzcard__placeholder{
    width:100% !important;
    height:auto !important;
    max-height:180px;
  }
  .amzcard__placeholder{padding:2rem 0;font-size:2.5rem}
  .amzcard__body{flex:1 1 auto !important}
  .amzcard__title{font-size:0.9rem !important}
  .amzcard__btn{display:block !important;text-align:center}
}

/* === [tomomi_top] grid wrapper — listicle automático por taxonomía === */
.tomomi-top{margin:1.5rem 0}
.tomomi-top__title{
  margin:0 0 0.8rem 0 !important;
  font-size:1.15rem !important;
  font-weight:600 !important;
  color:#111827 !important;
}
.tomomi-top__grid{display:flex;flex-direction:column;gap:0.6rem}
.tomomi-top__grid .amzcard{margin:0 !important;max-width:100%}

/* === Fallback para navegadores SIN container queries === */
@supports not (container-type:inline-size){
  @media (max-width:480px){
    .amzcard{flex-direction:column !important}
    .amzcard__image{flex:0 0 auto !important;width:100% !important;aspect-ratio:auto;height:auto !important;max-height:200px}
    .amzcard__image img,
    .amzcard__placeholder{height:auto !important;max-height:180px;width:100% !important}
    .amzcard__btn{display:block !important;text-align:center}
  }
}